CSS3 Inheritance Tips and Tricks – inherit, initial & unset

It’s easy to overlook the cascading features of style-sheets. Most designers/developers are aware of the inherit keyword but there are a few new inheritance features in CSS3 you may not be aware of…  read more @ http://www.css-jquery-design.com/…

css3-inheritance-tips-and-tricks-inherit-initial-unset

property: inherit;

The inherit keyword means “use whatever value is assigned to my parent”. If no value was explicitly defined on the parent element, the browser works up the DOM tree until the property is found. Ultimately, it ends at the browser  read more @ http://www.css-jquery-design.com/…
read-more-button

Pure CSS3 Animated Polaroid Gallery

Normally, Polaroid Gallery is a CSS3 & jQuery Image Gallery plugin for Media Library. It is used to overlay images as Polaroid pictures on the current page or post.

It’s a sure thing that CSS3 features like transitions, animations and transforms can add extra spice to your designs. In this article you will see how you can build an awesome CSS3 animated  Polaroid pictures gallery with some of these cool features.  This is something I wished to do for a while and I finally made it.css3-animated-polaroid-gallery

The HTML

The HTML structure hasn’t changed at all, simple and minimal. Here’s an excerpt:

<div class="photo-album">
<h2>Dhiraj, Geetu & Atharv at Taj ↦ Agra
  <a class="large polaroid img1" href="#"> 
    <img alt="" src="https://lh3.googleusercontent.com/-73u0oSgSX0w/UQ6PZ0Z1wOI/AAAAAAAADPE/57bc9C0BEG0/s512/Agra-trip%252520112.JPG" /> 
    Camel wants to kiss Atharv. </a> 
  <a class="polaroid img2" href="#"> 
    <img alt="" src="https://lh4.googleusercontent.com/-cPFum21LNBA/UQ6PXyb2ISI/AAAAAAAADPM/kJLhIyvx_2k/s512/Agra-trip%252520147.JPG" /> 
    My dearest one.. Atharv with Geetu. — at Taj Mahal</a> 
  <a class="small polaroid img3" href="#"> 
    <img alt="" src="https://lh6.googleusercontent.com/-Bz8NR-oKxGw/UQ6PguAxrsI/AAAAAAAADNY/B7i8X02vnbg/s512/Agra-trip%252520153.JPG" /> 
    Ferntastic</a> 
  <a class="medium polaroid img4" href="#"> 
    <img alt="" src="https://lh4.googleusercontent.com/-gB3RNt_3aos/UQ6Pmx5egoI/AAAAAAAADKM/lensH9ojFd0/s512/Agra-trip%252520154.JPG" /> 
    My dearest one.. Atharv with Geetu. — at Taj Mahal</a> 
  <a class="polaroid img5" href="#"> 
    <img alt="" src="https://lh5.googleusercontent.com/-YbVIBYilZ-M/UQ6P0w2PC8I/AAAAAAAADNc/kKzFy9k51D8/s512/Agra-trip%252520170.JPG" /> 
    Atharv & Geetu with Dhiraj.. Taj in background</a> 
  <a class="polaroid img6" href="#"> 
    <img alt="" src="https://lh6.googleusercontent.com/-IedPhDIDTcg/UQ6P5NG_hSI/AAAAAAAADKw/frG26WPd_OY/s512/Agra-trip%252520175.JPG" /> 
    Atharv in a cute pose.. Taj mahal in background</a> 
  <a class="polaroid img7" href="#"> 
    <img alt="" src="https://lh6.googleusercontent.com/-fhOKmDe-6S4/UQ6QBnHRDhI/AAAAAAAADPw/StGk4el6PVI/s512/Agra-trip%252520192.JPG" /> 
    Atharv with his papa Dhiraj</a> 
  <a class="small polaroid img8" href="#"> 
    <img alt="" src="https://lh4.googleusercontent.com/-lUXHF4hGxak/UQ6QF_7iZnI/AAAAAAAADOs/-agtNNnnYbU/s512/Agra-trip%252520193.JPG" /> 
    awesome</a> 
  <a class="medium polaroid img9" href="#"> 
    <img alt="" src="https://lh3.googleusercontent.com/-a-kezOzwNR8/UQ6QNJpEa4I/AAAAAAAADNk/FAN4Z3LDy2Y/s512/Agra-trip%252520206.JPG" /> 
    Geetu with Dhiraj</a> 
  <a class="polaroid img10" href="#"> 
    <img alt="" src="https://lh6.googleusercontent.com/-J3Gcspy0HKg/UQ6QXk3ZV9I/AAAAAAAADQE/0PyQD_VvC8o/s512/Agra-trip%252520221.JPG" /> 
    Nice one..</a> 
  <a class="small polaroid img11" href="#"> 
    <img alt="" src="https://lh5.googleusercontent.com/-OLpIvUAwZ6E/UQ6QY9gnPwI/AAAAAAAADNo/00eTz4E3_GI/s512/Agra-trip%252520223.JPG" /> 
    Sulphurous</a> 
  <a class="small polaroid img12" href="#"> 
    <img alt="" src="https://lh6.googleusercontent.com/-V-NJ8w3N5hs/UQ6QYqtZVOI/AAAAAAAADOw/FcjS2sgQXxA/s512/Agra-trip%252520229.JPG" /> 
    Atharv with his papa..</a> <a class="small polaroid img13" href="#"> 
    <img alt="" src="https://lh4.googleusercontent.com/-W1T4Z6_xwlQ/UQ6QAdQwuzI/AAAAAAAADNg/vSiGaoo7_TU/s512/Agra-trip%252520188.JPG" /> 
    Atharv with his papa Dhiraj</a> 
  <a class="small polaroid img14" href="#"> 
    <img alt="" src="https://lh6.googleusercontent.com/-Bz8NR-oKxGw/UQ6PguAxrsI/AAAAAAAADNY/B7i8X02vnbg/s512/Agra-trip%252520153.JPG" /> 
    Nice one..</a> 
  <a class="polaroid img15" href="#"> 
    <img alt="" src="https://lh4.googleusercontent.com/-W1T4Z6_xwlQ/UQ6QAdQwuzI/AAAAAAAADNg/vSiGaoo7_TU/s512/Agra-trip%252520188.JPG" /> 
    Atharv with his papa Dhiraj</a> 
</div>

CSS

a.polaroid {
		display: block;
		text-decoration: none;
		color: #333;
		padding: 10px 10px 20px 10px;
		width: 150px;
		border: 1px solid #d7d7d7;
		background-color: white; background:rgba(255,255,255,.9);
		z-index: 2;
		font-size: 0.7em;
		-webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3),inset 0 0 0.7em rgba(0,0, 0, 0.4);;
		-moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3),inset 0 0 0.7em rgba(0,0, 0, 0.4);;
		box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3),inset 0 0 0.7em rgba(0,0, 0, 0.4);-webkit-filter: blur(1px); border-radius:5px;
		-webkit-transition: all 0.5s ease-in; text-align:center
	}
	a.polaroid:hover, a.polaroid:focus, a.polaroid:active {
		z-index: 999;
		border-color: #999;
		-webkit-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4),inset 0 0 0.7em rgba(0,0, 0, 0.4);
		-moz-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4),inset 0 0 0.7em rgba(0,0, 0, 0.4);
		box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4),inset 0 0 0.7em rgba(0,0, 0, 0.4);
		-webkit-transform: rotate(0deg) scale(1.05);
		-moz-transform: rotate(0deg) scale(1.05);
		transform: rotate(0deg) scale(1.05);-webkit-filter: blur(0px);
	}
	.polaroid img {
		margin: 0 0 15px;
		width: 150px;
		height: 120px;
	}

	a img {
		border: none;
		display: block;
	}

	.photo-album {
		position: relative; width: 80%; margin: 0 auto; max-width: 70em; height: 450px; margin-top:2.5em; min-width: 800px; max-width: 900px;
	}
	.photo-album .polaroid {
		position: absolute;
	}
	.photo-album h2 {
		position: absolute; z-index: 5; top: 150px; text-align: center; width: 100%; line-height: 2; 
	}
	.photo-album h2 span {
		background-color: white; background:rgba(255,255,255,.8);
		font-family: 'Satisfy', cursive;
		padding: 0.4em 0.8em 0.3em 0.8em;
		-webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
		-moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
		box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
		border-radius: 5px; border:1px solid #CCC
	}
	.photo-album .small {
		width: 75px; padding: 6px 6px 12px 6px; font-size: 0.6em;
	}
	.photo-album .small img {
		width: 75px; height: 60px;
	}
	.photo-album .medium {
		width: 200px; padding: 13px 13px 26px 13px; font-size: 0.8em;
	}
	.photo-album .medium img {
		width: 200px; height: 165px;
	}
	.photo-album .large {
		width: 300px; padding: 20px 20px 30px 20px; font-size: 1em;
	}
	.photo-album .large img {
		width: 300px; height: 250px
	}
	.photo-album .img1 {
		bottom: 10px; right: 365px; 
		-webkit-transform: rotate(10deg);
		-moz-transform: rotate(10deg);
		transform: rotate(10deg);
	}
	.photo-album .img2 {
		top: 50px; right: 20px;
		-webkit-transform: rotate(-4deg);
		-moz-transform: rotate(-4deg);
		transform: rotate(-4deg);
	}
	.photo-album .img3 {
		left: 400px; top: 0;
		-webkit-transform: rotate(-5deg);
		-moz-transform: rotate(-5deg);
		transform: rotate(-5deg);
	}
	.photo-album .img4 {
		top: 10px; left: 495px;
		-webkit-transform: rotate(-20deg);
		-moz-transform: rotate(-20deg);
		transform: rotate(-20deg);
	}
	.photo-album .img5 {
		bottom: 0; right: 0;
		-webkit-transform: rotate(1deg);
		-moz-transform: rotate(1deg);
		transform: rotate(1deg);
	}
	.photo-album .img6 {
		bottom: 10px; right: 156px;
		-webkit-transform: rotate(6deg);
		-moz-transform: rotate(6deg);
		transform: rotate(6deg);
	}
	.photo-album .img7 {
		bottom:0; left:400px;
		-webkit-transform: rotate(-10deg);
		-moz-transform: rotate(-10deg);
		transform: rotate(-10deg);
	}
	.photo-album .img8 {
		bottom: -20px; left: 700px;
		-webkit-transform: rotate(-8deg);
		-moz-transform: rotate(-8deg);
		transform: rotate(-8deg);
	}
	.photo-album .img9 {
		bottom: 0; left: 0;
		-webkit-transform: rotate(-8deg);
		-moz-transform: rotate(-8deg);
		transform: rotate(-8deg);
	}
	.photo-album .img10 {
		top: 0; left: 20px;
		-webkit-transform: rotate(8deg);
		-moz-transform: rotate(8deg);
		transform: rotate(8deg);
	}
	.photo-album .img11 {
		top: 0; right: 0;
		-webkit-transform: rotate(-8deg);
		-moz-transform: rotate(-8deg);
		transform: rotate(-8deg);
	}
	.photo-album .img12 {
		top: 0; left: 680px;
		-webkit-transform: rotate(18deg);
		-moz-transform: rotate(18deg);
		transform: rotate(18deg);
	}
	.photo-album .img13 {
		bottom: -20px; right: 630px;
		-webkit-transform: rotate(4deg);
		-moz-transform: rotate(4deg);
		transform: rotate(4deg);
	}
	.photo-album .img14 {
		top: 90px; left: 430px;
		-webkit-transform: rotate(15deg);
		-moz-transform: rotate(15deg);
		transform: rotate(15deg);
	}
	.photo-album .img15 {
		left:176px; top:20px;
		-webkit-transform: rotate(-8deg);
		-moz-transform: rotate(-8deg);
		transform: rotate(-8deg);
	}	
	a:hover, a:focus {
		z-index: 5;
	}

view demo

Your turn

I hope you enjoyed this article and the techniques I used. Please share your comments and questions below!

Posted by: Dhiraj kumar

Cool Typography Effects With CSS3 and jQuery

Today we will create a set of nice typography effects for big headlines using CSS3 and jQuery. There are many things we can do with CSS3 animations and transitions and we’ll explore some of the possibilities.

Today we will create a set of nice typography effects for big headlines using CSS3 and jQuery. There are many things we can do with CSS3 animations and transitions and we’ll explore some of the possibilites.

We’ll be using jquery.DG_lettering.js in order to style single letters of the words we’ll be having in our big headlines.

typography-effects-with-css-jquery

THE HTML

The structure will simply be an h2 element with an anchor inside. We’ll wrap the headline in a container:

<div id="letter-container" class="letter-container">
    <h2><a href="#">Sun</a></h2>
</div>

Then we’ll call the jquery.DG_lettering.js plugin, so that every letter gets wrapped in a span.

This example looks crazy: we’ll create a text shadow that “elevates” the letters. We’ll also create a pseudo element which has a superhero as background.

THE CSS

.letter-container h2 a:before{
    content: '';
    position: absolute;
    z-index: 0;
    width: 525px;
    height: 616px;
    background: transparent url(superhero.png) no-repeat center center;
    background-size: 40%;
    top: 0px;
    left: 50%;
    margin-left: -277px;
    transition: all 0.3s ease-in-out;
}

On hover, we will animate the background size to make the superhero larger:

.letter-container h2 a:hover:before{
    background-size: 100%;
}

The span will have the text-shadow that “elevates” the letters and on hover, we will move the letter down by adding a padding and changing the shadow:

.letter-container h2 a span{
    color: #ff3de6;
    float:left;
    position: relative;
    z-index: 100;
    transition: all 0.3s ease-in-out;
    text-shadow:  
      0px -1px 3px #cb4aba, 
      0 4px 3px #934589, 
      2px 15px 5px rgba(0, 0, 0, 0.2), 
      1px 20px 10px rgba(0, 0, 0, 0.3);
}
.letter-container h2 a span:hover{
    color: #e929d0;
    padding-top: 10px;
    text-shadow:  
      0px -1px 3px #cb4aba, 
      0 4px 3px #934589, 
      1px 1px 10px rgba(0, 0, 0, 0.2);
}

And that’s it! I hope you enjoyed creating some crazy typography effects with CSS3 and jQuery!

view demo

That’s it!

I hope you enjoyed this article and if you have questions, comments, or suggestions, let me know! Thanks for reading.

Posted by: Dhiraj kumar

Rotating Words With CSS Animations – CSS3 Keyframes Animation Example

In today’s tutorial we’ll create another typography effect. The idea is to have some kind of sentence and to rotate a part of it. We’ll be “exchanging” certain words of that sentence using CSS animations.
Please note: the result of this tutorial will only work as intended in browsers that support CSS animations.
So let’s start!

In the following, we’ll be going through demo.

rotating-words-css-animations

THE HTML

We’ll have a main wrapper with a h2 heading that contains first-level spans and two divisions for the rotating words:

<section class="rw-wrapper">
	<h2 class="rw-sentence">
		<span>Real poetry is like</span>
		<br />
		<span>creating beautiful butterflies</span>
		<br />
		<span>with a silent touch of</span>
		<div class="rw-words rw-words-1">
			<span>spice</span>
			<span>colors</span>
			<span>happiness</span>
			<span>wonder</span>
			<span>sugar</span>
			<span>happiness</span>
		</div>
	</h2>
</section>

Now, ignoring the garbage placeholder text, we want each span of the rw-word to appear at a time. For that we’ll be using CSS animations. We’ll create one animation for each division and each span will run it, just with different delays.
So, let’s look at the CSS.

THE CSS3

First, we will style the main wrapper and center it on the page:

.rw-wrapper{
	width: 80%;
	position: relative;
	margin: 110px auto 0 auto;
	font-family: 'Bree Serif';
	padding: 10px;
	height: 400px;
	overflow: hidden;
}

We’ll add some text shadow to all the elements in the heading:

.rw-sentence{
	margin: 0;
	text-align: left;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}

And add some specific text styling to the spans:

.rw-sentence span{
	color: #444;
	white-space: nowrap;
	font-size: 200%;
	font-weight: normal;
}

The divisions will be displayed as inline elements, that will allow us to “insert” them into the sentence without breaking the flow:

.rw-words{
	display: inline;
	text-indent: 10px;
}

Each span inside of a rw-words div will be positioned absolutely and we’ll hide any overflow:

.rw-words span{
	position: absolute;
	opacity: 0;
	overflow: hidden;
	color: #888;
	-webkit-transform-origin: 10% 75%;
	-moz-transform-origin: 10% 75%;
	-ms-transform-origin: 10% 75%;
	-o-transform-origin: 10% 75%;
	transform-origin: 10% 75%;
}

Now, we’ll run two animations. As mentioned previously, we’ll run the same animation for all the spans in one div, just with different delays:

.rw-words-1 span{
	animation: rotateWord 16s linear infinite 0s;
}
.rw-words-2 span{
    animation: rotateWordsSecond 18s linear infinite 0s;
}
.rw-words span:nth-child(2) {
	animation-delay: 3s; 
	color: #6b889d;
}
.rw-words span:nth-child(3) {
	animation-delay: 6s; 
	color: #6b739d;	
}
.rw-words span:nth-child(4) {
	animation-delay: 9s; 
	color: #7a6b9d;
}
.rw-words span:nth-child(5) {
	animation-delay: 12s; 
	color: #8d6b9d;
}
.rw-words span:nth-child(6) {
	animation-delay: 15s; 
	color: #9b6b9d;
}

Our animations will run one cycle, meaning that each span will be shown once for three seconds, hence the delay value. The whole animation will run 6 (number of images) * 3 (appearance time) = 18 seconds.
We will need to set the right percentage for the opacity value (or whatever makes the span appear). Dividing 6 by 18 gives us 0.333… which would be 33% for our keyframe step. Everything that we want to happen to the span needs to happen before that. So, after tweaking and seeing what fits best, we come up with the following animation (Fade in and “fall”) for the first words:

@keyframes rotateWord {
    0% { opacity: 0; }
    5% { opacity: 1; }
    17% { opacity: 1; transform: rotate(0deg); }
	19% { opacity: 1; transform: rotate(98deg); }
	21% { opacity: 1; transform: rotate(86deg); }
	23% { opacity: 1; transform: translateY(85px) rotate(83deg); }
	25% { opacity: 0; transform: translateY(170px) rotate(80deg); }
	80% { opacity: 0; }
    100% { opacity: 0; }
}

We’ll fade in the span and we’ll also animate its height.
The animation for the words in the second div will fade in and animate their width. We added a bit to the keyframe step percentages here, because we want these words to appear just a tiny bit later than the ones of the first word:

@keyframes rotateWordsSecond {
    0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }
    10% { opacity: 0.3; width: 0px; }
    20% { opacity: 1; width: 100%; }
    27% { opacity: 0; width: 100%; }
    100% { opacity: 0; }
}

css3-animations-rotating-words

And that’s it folks! There are many possibilities for the animations, you can check out the demo and see what can be applied!
I hope you enjoyed this tutorial and find it inspiring!
view demo

 

Posted by: Dhiraj kumar

Image Sprites – How to merge multiple images, and how to split them

An Image Sprites is a single image which is merged with multiple images. The reason why Image Sprites are needed instead of inserting multiple images into a page is to SAVE network bandwidth as well as reduce the number of server requests. Since inserting many images into a page will take longer time to load the pages, merging images into a single will help reduce loading time. For these reasons, I would recommend to use “CSS Image Sprites” function instead of inserting multiple images. Unfortunately, most of designers/developers not support this function as default, but through this tutorial, you would be able to merge multiple images into a single image as well as manipulating CSS.

“Image Sprites” is strongly recommended for Web, because Web themes have many graphics as default. Therefore, reducing the number of images is necessary to let people as well as search engines visit your sites faster than before. Some times ago, I have already posted an example of a cartoon type animation with help of Image Sprites.

Let me give you an example for easier understandings. Here is lots of avatars I have to put into a page. Without Image Sprites, I have to insert 24 individual avatars into a page. It will generate 24 requests of your web server so that it will take a long time to load.

24 image files to load / 24 requests

Just 1 image file to load / 1 request

With using “Image Sprites”, Only one request and one loading time will be generated. Which one do you think better?

In addition, with the help of “Image Sprites”, you can make use of hover effect more easily. In this tutorial, I will describe how to use Image Sprites with hover effects (View Demo).

To get started (Preparation)

  1. You may need to prepare more than two same size images to be inserted into a page like the avatar image file above.
  2. For this tutorial, I will use these 6 images below as an example. All six buttons’ sizes are equal as 33×33.

3 left images will be used for normal links, and the rest of images will be used for hover effects.

This single image below will be used for “Image Sprites”.

Instruction

  1. Download .zip file or View Demo.
  2. Extract the compressed file onto your hard drive.
  3. Open “imagesprites.html” file using any TextEditor (Notepad/Dreamweaver).
  4. I will let you know some parts you need to replace so that you better modify some codes using text editor.
  5. This code is for this example so that your code will be different. You can refer to this code about how it works.
  6. Take a look at this part of the source code below:
.prev-button {
    width: 33px; height: 33px; border: 0px; background:url('/images/controllers.png') 0 0
}
a:hover .prev-button {
    width: 33px; height: 33px; border: 0px; background: url('/images/controllers.png') 0px -33px
}
.play-button  {
    width: 33px; height: 33px; border: 0px; background:url('/images/controllers.png') -33px 0
}
a:hover .play-button  {
    width: 33px; height: 33px; border: 0px; background: url('/images/controllers.png') -33px -33px
}
.next-button  {
    width: 33px; height: 33px; border: 0px; background:url('/images/controllers.png') -66px 0
}
a:hover .next-button  {
    width: 33px; height: 33px; border: 0px; background: url('/images/controllers.png') -66px -33px
}
image sprite
 As you can see, the first image’s position is “0 0” (.prev-button). The second image (.play-button) position is “-33px 0”. Because each width is set to 33px. Hence, the next image’s position should be “-66px 0”. On the other hand, for hover images, their Y position should be “-33px”, because each height is set to 33px.
  1. If you have set all, the next is to insert HTML codes for each image class like below:
<body style="background: transparent; margin: 0pt; ">
<div>
<a href="URL" target="_top"><img class="prev-button" src="/images/spacer.gif" /></a>
</div>

<div>
<a href="URL" target="_top"><img class="play-button" src="/images/spacer.gif" /></a>
</div>

<div>
<a href="URL" target="_top"><img class="next-button" src="/images/spacer.gif" /></a>
</div>
</body>
  1. If you don’t want an image to be linked, remove href= “URL” target= “_top” tag.
  2. Replace class names such as “prev-button”, “play-button”, and “next-button” to yours.
  3. Make sure the classes doesn’t have “.” at the very front.
  4. Modifying codes is done. You can apply this technique to other merged images.
  5. Make sure “spacer.gif” as well as your merged image file are also uploaded to the right place such as “/images/”.
  6. You are ready to check how “Image Sprites” works correctly. You will reduce the number of server requests as well as save network bandwidth with this CSS technique.

Posted by: Dhiraj kumar

Unquoted font family names in CSS

CSS

Are the quotes in font-family: 'Comic Sans MS' required, or not?

According to the the CSS validator, the quotes are supposed to be there in this case because the font family name contains spaces:

Family names containing whitespace should be quoted. If quoting is omitted, any whitespace characters before and after the name are ignored and any sequence of whitespace characters inside the name is converted to a single space.

However, this is an error in the CSS validator. The warning message suggests that all font family names containing whitespace should be quoted, which is simply not true. font-family: Comic Sans MS (without quotes) is perfectly valid CSS that works the way you’d expect it to.

In reality, it’s a bit more complex. To grok the rules on font family names, we need to understand the difference between CSS strings and identifiers first.

Strings and identifiers

The spec says the following about strings:

Strings can either be written with double quotes or with single quotes.

Identifiers are defined as follows:

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters[a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_).

ISO 10646 defines the Universal Character Set, which correlates to the Unicode standard. Note that they’re actually talking about the hyphen-minus character — not the hyphen character, which is U+2010. The code point for hyphen-minus is U+002D, and for underscore (low line) it’s U+005F. The highest code point currently allowed by Unicode is U+10FFFF. So, any character matching the regular expression [-_\u00A0-\u10FFFF] is allowed in an identifier.

The spec continues:

[Identifiers] cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code […]. For instance, the identifier B&W? may be written as B\&W\? or B\26 W\3F .

Translated into regex: any string that matches ^(-?\d|--) is not a valid CSS identifier.

Whitespace

Both the CSS 2.1 and CSS3 Fonts Module Level 3 specs say:

Font family names must either be given quoted as strings, or unquoted as a sequence of one or more identifiers. This means most punctuation characters and digits at the start of each token must be escaped in unquoted font family names.

Note: “a sequence of one or more identifiers” implies that multiple space-separated identifiers will form a single font family name. Therefore, font-family: Comic Sans MS is valid, and equivalent to font-family: 'Comic Sans MS'. The former consists of three space-separated identifiers, the latter is simply a string.

This is clarified a few paragraphs down in the spec:

If a sequence of identifiers is given as a font family name, the computed value is the name converted to a string by joining all the identifiers in the sequence by single spaces.

The aforementioned CSS validator warning describes what happens if leading or trailing whitespace is used around identifier sequences:

[A]ny whitespace characters before and after the name are ignored, and any sequence of whitespace characters inside the name is converted to a single space.

This is implied by the spec text, too: an unescaped whitespace character can never be part of an identifier, so it can never start a “sequence of identifiers”.

Generic family keywords

The spec defines the following generic family keywords: serifsans-serifcursivefantasy, andmonospace. These keywords can be used as a general fallback mechanism, in case the desired font choices are not available. Authors are encouraged to append a generic font family as a last alternative for improved robustness. As keywords, they must not be quoted.

In other words, font-family: sans-serif means that a generic sans-serif font family will be used, whilefont-family: 'sans-serif' (with quotes) refers to an actual font that goes by the name of sans-serif. A very important difference!

Other keyword values

The same behavior applies to a few other keywords, too:

Font family names that happen to be the same as a keyword value (inheritserifsans-serifmonospace,fantasy, and cursive) must be quoted to prevent confusion with the keywords with the same names. The keywords initial and default are reserved for future use and must also be quoted when used as font names. User agents must not consider these keywords as matching the <family-name> type.

Note that all keywords are case-insensitive. For example, Monospacemonospace, and mOnOsPaCe all refer to the same keyword, and if you want to use a font with that exact family name rather than the default keyword value, you’ll need to quote it.

Summary

As long as the only disallowed characters in an otherwise valid identifier are single U+0020 space characters, and all space-separated parts are valid identifiers too, the identifier sequence can be used as an unquoted font family name (unless it’s a keyword, but there are no keywords with spaces in them).

If a font family name matches a keyword, it must be quoted to form a string.

If you want to use an invalid CSS identifier as (part of) a font family name, you’ll need to quote it to form a string instead; or you could just escape any special characters so it can remain an unquoted identifier.

Here are some example font-family declarations:

/* Invalid because `/` is not allowed in an identifier: */ font-family: Red/Black;
 /* Valid — an escaped `/` symbol is allowed in an identifier: */ font-family: Red\/Black;
 /* Invalid because a string cannot be combined with an identifier: */ font-family: 'Lucida' Grande;
 /* Valid — it’s a single string: */ font-family: 'Lucida Grande';
 /* Valid — it’s a space-separated sequence of two identifiers: */ font-family: Lucida Grande;
 /* Valid — it’s still a space-separated sequence of two identifiers: */ font-family: Lucida     Grande;
 /* Invalid because `!` is not allowed in an identifier: */ font-family: Ahem!;
 /* Valid — it’s a string: */ font-family: 'Ahem!';
 /* Valid — an escaped `!` is allowed in an identifier: */ font-family: Ahem\!;
 /* Invalid because an identifier cannot start with a digit: */ font-family: Hawaii 5-0;
 /* Valid — it’s a string: */ font-family: 'Hawaii 5-0';
 /* Valid — `\35 ` (including the space) is an escape sequence for `5`: */ font-family: Hawaii \35 -0;
 /* Valid — `\ ` (including the space) is an escape sequence for ` `: */ font-family: Hawaii\ 5-0;
 /* Invalid — `$` is not allowed in an identifier: */ font-family: $42;
 /* Valid — an escaped `$` symbol is allowed in an identifier: */ font-family: \$42;
 /* Valid — `€` is allowed in an identifier: */ font-family: €42;

Bonus puzzle: Other than keywords, I can only think of one font family name that can’t be used without quotes — there is no way to escape it in an identifier. Do you know which one?

Posted by: Dhiraj kumar

7 tips to organize your CSS

Working often with CSS for my own website or for my job makes me trying always to be organized and that made me thinking about a thing. What is the best way to organize my CSS file(s)? With this article I will try to present you a short guide about CSS organizing.

tips-to-organize-your-css

1. Group your CSS files into a folder

Beside your main CSS file you may want to use also a print CSS file or why not a CSS file for the IE6/7 browser. Placing them together in a folder named css for example will help you improve your website back-end structure.

group-css-files

2. Use efficient selectors

A very important thing for you to know is how browsers understand and read your CSS selectors? The answer is that they read them from right to left. That means that for the selector ul li a span the first thing thing interpreted is span.

efficient-selectors

The id is the selector with the greater specificity so always, instead div#header you should use just #header. This way your file will be less redundant and smaller. Also note that the use of efficient CSS selectors is a nowadays requirement.

3. Comment and separate your CSS rules

Generally, a CSS file contains reset styles, header, content and footer styles and in order to easier browse your CSS rules you should choose a way to separate them.

comment-css

You can choose an simple and easy to notice separator as in the following example:

  /* Header styles */
  /* ---------------------------------- */
  /* Content styles */
  /* ---------------------------------- */
  /* Footer styles */

4. Create a simple color scheme to use for your styles

When you are dealing for example with a CSS file for an web application you will use a lot common styles and colors.  So placing something as following inside a CSS comment could be very helpful for you:

  /* Colors: Light Gray #eaeaea, Dark Gray #828282, Red #c60000 */

5. Use a meaning naming convention for your selectors.

Let’s suppose you need to name your logo, menu and a tagline that are placed inside a header id wrapper. A good approach in this way would be to use namings as:

  • header-logo or h-logo
  • header-menu or h-menu
  • header-tag or h-tag

css-naming-convention

6. Create your own small CSS framework

By doing that you will be able to use these common CSS classes at any time for any elements from your markup.

.full-width{
  width: 100% !important;
}

.min-width{
  width: 1% !important;
  white-space: nowrap !important;
}

.centered-inline{
  text-align: center !important;
}

.centered-block{
  margin-left: auto !important;
  margin-right: auto !important;
}

7. Simple is better

Don’t try to complicate things because simplicity will save you time, effort and why not your remaining hair 🙂

Posted by: Dhiraj kumar