• Tweet

• Tweet

CSS is new the holy grail of web designing. The websites of today have their styles dictated by the CSS codes and thanks to the newfound flexibility and power with this tool, it is being learned right from the root level.

The novices in web designing are taking great pains to introduce themselves to the most intricate concepts of CSS, however, there are certain CSS code snippets that are meant to make things easier for one and all.

We bring forth some extremely resourceful CSS content snippets that will make life easy for you:

CSS Animation for Ellipsis

Ellipsis is a popular form of animation, and for implementing it on your web page, you simply have to use the following code that will also ensure that loading happens without any fuss:


loading:after {
overflow: hidden;
display: inline-block;
vertical-align: bottom;
animation: ellipsis 2s infinite;
content: "\2026"; /* This signifies the ascii code for the ellipsis character */
}
@keyframes ellipsis {
from {
width: 3px;
}
to {
width: 16px;
}
}


Displaying a Box Shadow

When you are aiming for the shadow effect, but in the box form and on both sides, you first have to initiate the box and define its dimensions. Then for the shadow, you need to use the :after pseudo element and then you can experiment with its shadow.

Let’s see the code if you wish to create a shadow on the bottom:


.box-shadow {
background-color: #A31717;
width: 150px;
height: 85px;
margin-top: -40px;
margin-left: -70px;
position: absolute;
top: 50%;
left: 50%;
}
.box-shadow:after {
content: "";
width: 150px;
height: 1px;
margin-top: 83px;
margin-left: -70px;
display: block;
position: absolute;
left: 50%;
z-index: -1;
-webkit-box-shadow: 0px 0px 7px 1px #000000;
-moz-box-shadow: 0px 0px 7px 1px #000000;
box-shadow: 0px 0px 7px 1px #000000;
}


For Aligning Images Centered Vertically and Horizontally

The following code will center align the image in a box. The container box will have fixed dimensions:


.logo {
display: block;
text-align: center;
display: block;
text-align: center;
vertical-align: middle;
border: 3px solid #8B2424;
padding: 3px;
height: 69px;
width: 69px; }
.logo * {
display: inline-block;
height: 100%;
vertical-align: middle; }
.logo .photo {
height: auto;
width: auto;
max-width: 100%;
max-height: 100%; }


For Browsing Resets

There is no dearth of CSS snippets for the browser resets. Let us see a code in which we will integrate some responsive images and make sure everything is aligned appropriately:


html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html { height: 99%; }
body { font-size: 60%; line-height: 1; font-family: Arial, Tahoma, sans-serif; }

p { font-size: 1.1em; line-height: 1.0em; color: #fff; }


CSS Fixed Footer

It is extremely important to ensure the footer is kept fixed at the bottom section of window. And we will do the same by making some alterations in CSS:


#footer {
position:fixed;
left:0px;
bottom:0px;
height:28px;
width:100%;
background:#142EED;
}


CSS Snippet to Align Style for iPad

It does take some setup to make sure the user interface on iPads and other iOS devices is smooth. The orientation-based style is the need of the hour and we can use the below code to create a stylesheet that facilitates a better orientation:



@media only screen and (max-device-width: 1024px) and (orientation:portrait) {
.landscape { display: none; }
}
@media only screen and (max-device-width: 1024px) and (orientation:landscape) {
.portrait { display: none; }
}

Rounded Corners

You may already know the code for rounded corners, but here we present the code that can be used for rounded corners with different value for each of them:


#container {
-webkit-border-radius: 3px 2px 5px 9px;
-moz-border-radius: 3px 2px 5px 9px;
-o-border-radius: 3px 2px 5px 9px;
border-radius: 3px 2px 5px 9px;
}

-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 2px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 9px;
}


If you haven’t yet gotten around to using them, start right away.

ABOUT THE AUTHOR > Mike Swan

Being a well-known WordPress developer from Markupcloud Ltd., Mike gives important and best tips on converting HTML to WordPress theme and configuration procedure. Additionally, he is devotee of offering his creative thoughts identified with web outline advances.

• View all posts by Mike Swan →
• Blog