RSS

Category Archives: CSS

Animate.css – Cool Cross Browser Animations Using CSS

Animate.css adds cool, cross browser animations using pure css. This css file helps you to easily add attention seekers, flippers, fading entrances, fading exits, sliders, bouncing entrances, bouncing exits, rotating entrances, rotating exits, lightspeed and other special effects.

Animate.css

Animate.css

To use animate.css in your website, simply drop the stylesheet into your document’s <head>, and add the class animated to an element, along with any of the animation names. That’s it! You’ve got a CSS animated element.

You can do a whole bunch of other stuff with animate.css when you combine it with jQuery or add your own CSS rules. Dynamically add animations using jQuery with ease:

1
$(‘#yourElement’).addClass(‘animated bounceOutLeft’);

 

The plugin is licensed under MIT license. Here is the set of css classes defined which you can readily paste it for bringing animations.

Attention seekers:

flash bounce shake tada swing wobble pulse

Flippers (currently Webkit, Firefox, & IE10 only):

flip flipInX flipOutX flipInY flipOutY

Fading entrances:

fadeIn fadeInUp fadeInDown fadeInLeft fadeInRight fadeInUpBig fadeInDownBig fadeInLeftBig fadeInRightBig

Fading exits:

fadeOut fadeOutUp fadeOutDown fadeOutLeft fadeOutRight fadeOutUpBig fadeOutDownBig fadeOutLeftBig fadeOutRightBig

Bouncing entrances:

bounceIn bounceInDown bounceInUp bounceInLeft bounceInRight

Bouncing exits:

bounceOut bounceOutDown bounceOutUp bounceOutLeft bounceOutRight

Rotating entrances:

rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight

Rotating exits:

rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight

Lightspeed:

lightSpeedIn lightSpeedOut

Specials:

hinge rollIn rollOut

 
Leave a comment

Posted by on September 17, 2013 in CSS

 

How to Make Mobile Friendly Websites. Responsive Web Design for Beginners

Responsive Web Design is a web design process which ensures optimal viewing experience in all displays available. The display can be of desktops, tablets, mobiles and now the increasingly popular big screens of smart televisions.
This article helps you to make your website mobile friendly or tablet friendly. This article suits for those developers who wish to convert their existing website to responsive layout or for those who wish to develop a responsive website from scratch.

Here I have listed few techniques which help you to make your website responsive. For better understanding, I have created 2 demo pages. One is not responsive and other one is responsive. I will be using these pages to illustrate each points. Here is the html which I have used for both responsive and non responsive pages.

Demo 1: Non Responsive Web Page
Demo 2: Responsive Web Page

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<div class=”container”><!– Main Container –>
    <div class=”header”><!– Top Header –>
        <div class=”logo-wrapper”><!– Top left for logo –>
            <img class=”logo”/>
        </div>
        <div class=”search-wrapper”><!– Top right for search –>
            <input type=”text” class=”search”/>
        </div>
    </div>
    <div class=”main”><!– Main content holder –>
        <div class=”content-wrapper”><!– Main window for content –>
            <h1 class=”title”></h1>
            <div class=”content”></div>
        </div>
        <div class=”sidebar-wrapper”><!– Right sidebar –>
            <ul class=”widget-wrapper”>
                <li class=”widget”><!– First widget –>
                    <div class=”widget-title”></div>
                    <div class=”widget-content”></div>
                </li>
                <li class=”widget”><!– Second widget –>
                    <div class=”widget-title”></div>
                    <div class=”widget-content”></div>
                </li>
                <li class=”widget”><!– Third widget –>
                    <div class=”widget-title”></div>
                    <div class=”widget-content”></div>
                </li>
            </ul>
        </div>
    </div>
    <div class=”footer”></div>
</div>

 

Fluid Grids

While implementing your design from Photoshop files using html, try to avoid tables for layouts. Using tables give a less flexible layout. Use tables only for its real purpose, i.e. to display tabular data. For layout design, use div tags instead. div tags are by default block level elements. They can be floated based on our layout and will stack smoothly in small display sizes. As the term suggests, fluid grids means the grid is self adjustable. A fixed grid is defined using pixels or points, where as the width of fluid grid is defined using percentages or Ems. When we use say 90% width for the main page container div tag, the div itself will shrink when we reduce the size of screen or browser.

In the non-responsive page design demo, we have created a main parent div of 960px width and all inner sections are clearly defined using pixels. While in responsive page, we gave 68% width to main content area and 32% width for sidebar.

CSS3 Media Queries

CSS3 media queries allow a developer to set css style rules based on different display properties. The size of a mobile device may be different from that of a tablet. We use media queries to show a web page comfortably in each devices.

In our demo, we have used media queries to display all major blocks, one below the other. This layout is more comfortable for mobile users to read an article. Some websites hide some elements in smaller display devices. This helps to avoid distractions like ads or less important content.

Fluid Image size

This part is simple, yet really powerful for responsive web design. Usually we design needed image with a size which is predefined for the layout. Only thing we need to add is a width measurement in percentage. This will increase or decrease image size based on screen width.

 
6 Comments

Posted by on September 13, 2013 in CSS, HTML

 

CSS :nth-child And :nth-of-type Complete Reference

Developers use nth-child in css to style alternate rows, for picking a specific child element etc. There is much more nth-child can deliver.

nthMaster has really mastered nth-child. See various live examples to see the real power of this css property.

Few interesting Snippets

Snippet 1: Using the :nth-child(n+6) like this allows you pick :nth-child(6) and above

1
2
3
4
li:nth-child(n+6) span {
    background-color: #298EB2;
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
}

nth-child Positive Range

nth-child Positive Range

Snippet 2: Using this nth-child(n+4):nth-child(-n+8) we can select elements within certain ranges, in this case elements 4-8.

1
2
3
4
li:nth-child(n+4):nth-child(-n+8) span {
    background-color: #298EB2;
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
}

Generic Child Ranges

Generic Child Ranges

 

 
Leave a comment

Posted by on September 13, 2013 in CSS

 

3D Button Parallax

The introduction of CSS3 resulted in the explosion of beautiful and interesting buttons, styled with gradients, shadows, and borders – often to achieve a 3D effect. The problem with such 3D buttons is a static perspective. The 3D is not always very convincing when you can only see its front and perhaps a bit from an edge or two – even when the page moves and the position of the button on the page moves.

Fortunately, we can achieve a realistic perspective effect with the help of 3D transforms to adjust the sides of the buttons. We can do this without modifying existing HTML, by using pseudo elements for the sides. Then bring forward the button itself withtranslateZ.

Before we start, we must first solve a problem. The perspective origin point is usually set at the vertical and horizontal center of the element. This means that when we set it based on the body we will get something like this:

By setting the height of the body to be 100%, we can fix the perspective origin point to the center of the viewport like this:

html {
  height: 100%;
  overflow: hidden;
}

body {
  height: 100%;
  overflow-y: scroll;
}

For a simple <button>, here’s the CSS:

button {
  position: relative;
  display: inline-block;
  padding: 4px 16px;
  border: 0;
  background-color: blue;
  background-image: radial-gradient(ellipse at top, rgba(255, 255, 255, 0.15) 50%, transparent);
  color: #222;
  transform-style: preserve-3d;
  transform: translateZ(20px);
}

button::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  transform-origin: 0% 0%;
  transform: rotateX(-90deg);
}

button::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  transform-origin: 0% 0%;
  transform: rotateY(90deg);
}

But how do we get 4 sides for each button with just 2 pseudo elements? JavaScript! if we want to avoid adding extra wrappers to each button (we do) we need scripting to move the top side down and the left side to the right depending on where the button is relative to the user’s viewport. The script for switching the top with the bottom side of the button is pretty straightforward – changing top/bottom or right/lest sides occurs only on load and on resize, and top/bottom only on scroll:

$(window).on("load resize", function() {
  topHalf();
  leftHalf();
});

$("body").scroll(function() {
  topHalf();
});

function topHalf() {
  $("button").each(function() {
    var self = $(this),
        offTop = self.offset().top,
        scrTop = $(window).scrollTop(),
        halfWindowHeight = ($(window).height())/2;

    self.toggleClass("top-half", (offTop - scrTop) < halfWindowHeight);
  });
}

function leftHalf() {
  $("button").each(function() {
    var self = $(this),
        offLeft = self.offset().left,
        halfWindowWidth = ($(window).width())/2;

    self.toggleClass("left-half", offLeft < halfWindowWidth);
  });
}

Editor’s note: This could certainly be refactored a bit to lend structure and gain some efficiency. Feel free to fork the Pen below and have a go!

Some new classes will help position the sides:

button.top-half::before {
  top: auto;
  bottom: 0;
  transform-origin: 100% 100%;
  transform: rotateX(90deg);
}

button.left-half::after {
  left: auto;
  right: 0;
  transform-origin: 100% 100%;
  transform: rotateY(-90deg);
}

Keep in mind that if you use classes to float the buttons (for example .pull-left and.pull-right like in Twitter Bootstrap) you will know where each button is positioned horizontally and thus be able to skip half of the JavaScript code.

Here’s a styled demo to play around with. It has an animated push-down effect for the buttons and includes some other 3D elements that don’t requre any JavaScript:

A similar technique can also be used to replicate the 3D Inset Parallax Effect in a very rough way. It’s a bit more complex, but doesn’t require any JavaScript:

 
4 Comments

Posted by on September 8, 2013 in CSS, HTML

 

CSS Flip Boards

In this tutorial we are going to create a flip board effect by using CSS, there are 2 effects we can create one the hover event we are going to have one board flip on the horizontal and another board which will flip on the vertical.

This effect can be used to hide content from the user until they hover over the board this will then display the hidden board.

front board

flipped board

View the demo to see the effect.

Demo

There are a number of CSS3 properties we need to use to achieve this effect.

The HTML

First we start off with the HTML for the boards. Each board is made up of a div element with another 2 div elements inside, these are elements we are going to use as the front board and the flipped board.

<div>
<div>
	<div>
		<h2>Front Board</h2>
	</div>

	<div>
		<h2>Flipped Board</h2>
	</div>
</div>
</div>

Styling The Boards

To create the effect of the flipped board we are first going to style the boards.

.flip-boards .board
{
	float:left;
	margin: 2em 8em;
	position: relative;
	width: 200px;
	height: 200px;
	cursor: pointer;
}

.flip-boards .board div
{
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    border: 1px solid #ccc;
}

This will style the boards the same size and will position them in the same space so that they overlap each other.

You can change the background of the boards to make it easier to see the difference between the two boards.

.flip-boards .board .front
{
	color:#eee;
	background: rgb(207,231,250);
	background: -moz-linear-gradient(top,  rgba(207,231,250,1) 0%, rgba(99,147,193,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(207,231,250,1)), color-stop(100%,rgba(99,147,193,1)));
	background: -webkit-linear-gradient(top,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%); 
	background: -o-linear-gradient(top,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%); 
	background: -ms-linear-gradient(top,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);
	background: linear-gradient(to bottom,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cfe7fa', endColorstr='#6393c1',GradientType=0 );
}
.flip-boards .board .flipped
{
	color:#555;
	background: rgb(238,238,238);
	background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(238,238,238,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(238,238,238,1)));
	background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); 
	background: -o-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); 
	background: -ms-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); 
	background: linear-gradient(to bottom,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 );
}

With the flip board we need to hide the second board from view until it can be flipped around to see it. For this we use the CSS property backface-visibility, this property is related to the 3D transforms of the element. Using 3D transforms you can flip an element on the y-axis so that the front of the element is now facing in the opposite direction. Using the backface-visibility you can hide any elements that are not facing the front of the screen.

.flip {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);

  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:    hidden;
  -ms-backface-visibility:     hidden;
  backface-visibility:     hidden;
}

This code spins the element 180 degrees so that the front is now facing away from screen and now the element can be hidden by using the backface-visibility property. Now we can add this to our page by using the following CSS.

.flip-boards .board div
{
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    border: 1px solid #ccc;

    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
    backface-visibility:         hidden;
}

.flip-boards .board.top .flipped
{
	-webkit-transform: rotateX( 180deg );
	-moz-transform: rotateX( 180deg );
	-ms-transform: rotateX( 180deg );
	transform: rotateX( 180deg );
}

Now the flipped board will be hidden from view, the way we display this again is to flip the board on the hover event.

.flip-boards .board.top:hover
{
	-webkit-transform: rotateX( 180deg );
	-moz-transform: rotateX( 180deg );
	-ms-transform: rotateX( 180deg );
	transform: rotateX( 180deg );
}

We should also add a transition effect so that there is a smooth flip when rotating the board, this is done by using CSS transition, we also need to make sure that when the boards transforms it will preserve the 3D space by using the property transform-style.

.flip-boards .board
{
	float:left;
	margin: 2em 8em;
	position: relative;
	width: 200px;
	height: 200px;
	cursor: pointer;

	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;

	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;
}

That’s all you need to create a flip board look which will have a hidden div which will be flipped into view when you hover over the board.

View the demo to see it in action.

Demo

Full Code Of The Flip Board

<div>
		<div>
			<div>
				<h2>Front Board</h2>
			</div>

			<div>
				<h2>Flipped Board</h2>
			</div>
		</div>

		 <div>
			<div>
				<h2>Front Board</h2>
			</div>

			<div>
				<h2>Flipped Board</h2>
			</div>
		</div>
	</div>

	<div>
		<div>
			<div>
				<img src="http://placedog.com/200/200" />
			</div>

			<div>
				<img src="http://placekitten.com/g/200/200" />
			</div>
		</div>

		 <div>
			<div>
				<img src="http://placekitten.com/200/200" />
			</div>

			<div>
				<img src="http://placedog.com/g/200/200" />
			</div>
		</div>
	</div>
.flip-boards{ position: relative; }
.flip-boards .board
{
	float:left;
	margin: 2em 8em;
	position: relative;
	width: 200px;
	height: 200px;
	cursor: pointer;

	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;

	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;
}
.flip-boards .board div
{
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    border: 1px solid #ccc;

    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
    backface-visibility:     hidden;
}
.flip-boards .board .front
{
	color:#eee;
	background: rgb(207,231,250); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(207,231,250,1) 0%, rgba(99,147,193,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(207,231,250,1)), color-stop(100%,rgba(99,147,193,1)));
	background: -webkit-linear-gradient(top,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);
	background: -o-linear-gradient(top,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);
	background: -ms-linear-gradient(top,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);
	background: linear-gradient(to bottom,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cfe7fa', endColorstr='#6393c1',GradientType=0 );
}
.flip-boards .board .flipped
{
	color:#555;
	background: rgb(238,238,238); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(238,238,238,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(238,238,238,1)));
	background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%);
	background: -o-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%);
	background: -ms-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%);
	background: linear-gradient(to bottom,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 );
}
.flip-boards .board h2{
	margin-top:80px;
	font-size: 1em;
}

.flip-boards .board.top:hover
{
	-webkit-transform: rotateX( 180deg );
	-moz-transform: rotateX( 180deg );
	-ms-transform: rotateX( 180deg );
	transform: rotateX( 180deg );
}
.flip-boards .board.top .flipped
{
	-webkit-transform: rotateX( 180deg );
	-moz-transform: rotateX( 180deg );
	-ms-transform: rotateX( 180deg );
	transform: rotateX( 180deg );
}

.flip-boards .board.left:hover
{
	-webkit-transform: rotateY( 180deg );
	-moz-transform: rotateY( 180deg );
	-ms-transform: rotateY( 180deg );
	transform: rotateY( 180deg );
}
.flip-boards .board.left .flipped
{
	-webkit-transform: rotateY( 180deg );
	-moz-transform: rotateY( 180deg );
	-ms-transform: rotateY( 180deg );
	transform: rotateY( 180deg );
}

 

 
1 Comment

Posted by on September 5, 2013 in CSS

 

Create An Animated CSS Box Menu

In this tutorial were going to play with CSS transitions to create a new style navigation menu. The effect we are aiming for is having a number of navigation boxes, and when the mouse hovers over a box this will grow and shrink the other boxes. We can even add an icon to animate into the box to represent the page on the navigation.

View the demo to see this effect.

Demo

CSS Flexible Box Menu

CSS Flexible Box Menu About

CSS Flexible Box Menu Services

The HTML

First were going to start off with the HTML for the navigation boxes. This consists of a wrapper div element with the boxes inside. Each of the boxes will have text for the page and an image icon to represent the page.

<div>
     <div>
	<a href="#home">HOME
	<span><img src="./images/home.png" alt="" /></span></a>
     </div>
     <div>
	<a href="#about">ABOUT
	<span><img src="./images/person.png" alt="" /></span></a>
      </div>
      <div>
	<a href="#portfolio">PORTFOLIO
	<span><img src="./images/folder.png" alt="" /></span></a>
      </div>
     <div>
	<a href="#services">SERVICES
	<span><img src="./images/screw-driver.png" alt="" /></span></a>
     </div>
     <div>
	<a href="#contact">CONTACT
	<span><img src="./images/mail-back.png" alt="" /></span></a>
     </div>
</div>

Styling The Boxes

The CSS will provide all the functionality for the navigation bar. We start off by styling each of the individual boxes, we set the height and width of the boxes to what ever we want to fill the screen. Add a display: inline-block so that the box will display next to each other instead of on top of each other.

As we are going to animate in an icon we want to make sure that we hide anything that overflows this element by using the overflow:hidden property.

Then we can add the transition for the width of the box so that on the hover event we can change the width of the boxes.

.box
{
	display: inline-block;
        float:left;
	height:200px;
	overflow: hidden;
	width:20%;

	-webkit-transition: width 1s;
	-moz-transition: width 1s;
        transition: width 1s;
}

Now we can style the background colours of the different boxes.

.box.home      { background-color: #2d89ef; }
.box.about     { background-color: #00a300; }
.box.portfolio { background-color: #e3a21a; }
.box.services  { background-color: #9f00a7; }
.box.contact   { background-color: #ee1111; }

As we want the entire box area to be clickable we have to change the anchor link into a block element by using the display: block property and making the height of the link 100% of the box. This will make the entire box area a clickable link.

.box a
{
	color:#FFF;
	text-decoration: none;
	text-align: center;
	vertical-align: middle;
	height:100%;
	display:block;
        padding-top: 20px;
}

We want to make an icon animate into the box when you hover over the box, this will useCSS transitions to change the top property of a span tag, inside the tag will be an image we can use for the icon. At the start we need to move this image outside of the element, which will make it hidden by using the overflow: hidden property on the box element. Then we can use the position: relative property with top of 100% to move the span outside of the element.

Adding a transition on to the top property will animate the icon into the box when you hover over.

.box span
{
    display:block;
    position:relative;
    top:100%;
    text-align: center;

    -webkit-transition: top 1s;
    -moz-transition: top 1s;
    transition: top 1s;
}

The Hover Event

Creating the hover event for the navigation, when a user moves the mouse over the box 3 things will happen.

  • First all the boxes are going to shrink to 10% width.
  • The box that we are hovering over will be expanded to be 60% width.
  • Then the box we are hovering over has a span tag inside, this will then change the top property back to 25% bringing the element back into view.
.nav:hover .box { width:10%; }

.nav .box:hover { width: 60%; }

.box:hover span{ top:25%; }

Demo

 
1 Comment

Posted by on September 5, 2013 in CSS

 

How To Style First Character Using CSS

In some of the news sites, or blog articles people give a different style to the first character of the article. It looks like this.

CSS First-Letter

CSS First-Letter

Here is how we achieve it. For demo purpose we have a paragraph with class “content”.

1
2
3
<p class=”content”>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet imperdiet orci, sit amet lobortis nunc. Praesent lacus ipsum, feugiat vitae quam a, ornare mollis neque. Aliquam id tempus orci. Ut accumsan justo id erat varius, a rutrum lacus semper. Vivamus fringilla vehicula libero, id iaculis urna cursus in. Nunc cursus orci mauris, eget tristique enim pharetra sit amet. Mauris mattis, sem quis tempor cursus, tortor libero posuere magna, eu luctus magna turpis et turpis. Suspendisse nec tempus felis, sed viverra sapien. Pellentesque fermentum tincidunt faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc arcu mi, mattis malesuada nibh eget, aliquam tincidunt nisl. Aliquam ullamcorper cursus diam sit amet fringilla. Etiam augue ante, rutrum at vulputate ut, tempor eu sem. Suspendisse quis dictum turpis. Fusce ac ipsum at neque posuere rutrum.
</p>

 

We are going to style it using CSS first-letter property.

1
2
3
4
5
6
7
8
9
10
.content{
    font-family: georgia, arial;
    font-size: 16px;
    color: #666;
    line-height: 30px;
}
.content::first-letter{
    font-size: 45px;
    color: #ff0000;
}

 

 
Leave a comment

Posted by on September 5, 2013 in CSS