30 summary of several useful CSS3 writing effects

1. Vertical alignment

If you have encountered this problem before, you should know how annoying it is, fortunately, now you can use the CSS3 transform to solve this problem:

. vc{
position:relative;
top:50%;
-webkit-transform:translatey (-50%);
-o-transform:translatey (-50%);
Transform:translatey (-50%);
}
2. With projection only on one or both side

. Box-shadow {
Background-color: #AC92EC;
width:160px;
height:90px;
Margin-top: -45px;
Margin-left: -80px;
Position:absolute;
top:50%;
left:50%;
}
. box-shadow:after {
Content: "";
width:150px;
height:1px;
margin-top:88px;
Margin-left: -75px;
Display:block;
Position:absolute;
left:50%;
Z-index:-1;
-webkit-box-shadow:0px 0px 8px 2px #000000;
-moz-box-shadow:0px 0px 8px 2px #000000;
box-shadow:0px 0px 8px 2px #000000;
}
3. Gradient Background animation effect

From the beginning of the CSS3, animations have become very cool, but they must not be used too much. The following technique subtly moves the background position so that it looks like an animation:

button {
padding:15px;
Background-image:linear-gradient (#FC6E51, #FFF);
Background-size:auto 200%;
Background-position:0 100%;
Transition:background-position 0.5s;
}
Button:hover {
background-position:0 0;
}
4. Dividing text into multiple columns

Div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
Column-count:3;
}
5. Automatic width of table

TD {
White-space:nowrap;
}
6. Like a publication, the first word becomes larger

p:first-child::first-letter{
font-family: "Papyrus";
font-size:28px;
Font-weight:bold;
}
7. Full list of CSS hacks for a particular browser

Sometimes solving cross-browser compatibility can be tricky, but these specific browser tips may help you solve the problem.

/***** Selector Hacks ******/

/* IE6 and below */
* HTML #uno {color:red}

/* IE7 */
*:first-child+html #dos {color:red}

/* IE7, FF, SAF, Opera */
Html>body #tres {color:red}

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
Html>/**/body #cuatro {color:red}

/* Opera 9.27 and below, Safari 2 */
Html:first-child #cinco {color:red}

/* Safari 2-3 */
Html[xmlns*= ""] body:last-child #seis {color:red}

/* Safari, Chrome 1+, opera9+, FF 3.5+ */
Body:nth-of-type (1) #siete {color:red}

/* Safari, Chrome 1+, opera9+, FF 3.5+ */
Body:first-of-type #ocho {color:red}

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez {color:red}
}

/* Iphone/mobile WebKit */
@media screen and (max-device-width:480px) {
#veintiseis {color:red}
}


/* Safari 2-3.1 */
Html[xmlns*= ""]:root #trece {color:red}

/* Safari 2-3.1, Opera 9.25 */
*|html[xmlns*= ""] #catorce {color:red}

/* Everything but ie6-8 */
: Root *> #quince {color:red}

/* IE7 */
*+html #dieciocho {color:red}

/* Firefox only. 1+ * *
#veinticuatro, X:-moz-any-link {color:red}

/* Firefox 3.0+ */
#veinticinco, X:-moz-any-link, X:default {color:red}



/***** Attribute Hacks ******/

/* IE6 */
#once {_color:blue}

/* IE6, IE7 */
#doce {*color:blue;/* or #color: Blue */}

/* Everything but IE6 */
#diecisiete {color/**/: blue}

/* IE6, IE7, IE8 */
#diecinueve {color:blue\9;}

/* IE7, IE8 */
#veinte {color/*\**/: blue\9;}

/* IE6, IE7--acts as an!important */
#veintesiete {color:blue!ie;}/* string after! can be anything */
8. Create fuzzy text

. blurry-text {
Color:transparent;
text-shadow:0 0 5px Rgba (0,0,0,0.5);
}
9. Do not use the table to vertically center the image horizontally across the browser

This code can vertically center an unknown size picture in a known wide container, which is a hack of IE:

<figure class= ' logo ' >
<span></span>

</figure>
. logo {
Display:block;
Text-align:center;
Display:block;
Text-align:center;
Vertical-align:middle;
BORDER:4PX solid #dddddd;
padding:4px;
height:74px;
width:74px; }
. logo * {
Display:inline-block;
height:100%;
Vertical-align:middle; }
. logo. Photo {
Height:auto;
Width:auto;
max-width:100%;
max-height:100%; }
10. Highlight selected input

Html
<input id= "Mycheck1" type= "checkbox"/>
<label for= "mycheck1" >check box label here</label>
<br/>
<input id= "Mycheck2" type= "checkbox" checked/>
<label for= "Mycheck2" >check box label here</label>
<br/>
<input id= "Mycheck3" type= "checkbox"/>
<label for= "Mycheck3" >check box label here</label>

Css
input:checked + label{
Background:yellow;
}
11. Cross-browser transparency

selector {
Filter:alpha (OPACITY=50); /* Internet Explorer */
-khtml-opacity:0.5; /* khtml, Old Safari */
-moz-opacity:0.5; /* Mozilla, Netscape */
opacity:0.5; /* FX, Safari, Opera */
}
CSS projection

External projection
. Shadow {
-moz-box-shadow:5px 5px 5px #ccc;
-webkit-box-shadow:5px 5px 5px #ccc;
box-shadow:5px 5px 5px #ccc;
}

Internal projection
. Shadow {
-moz-box-shadow:inset 0 0 10px #000000;
-webkit-box-shadow:inset 0 0 10px #000000;
Box-shadow:inset 0 0 10px #000000;
}
13. Cross-Browser minimum height

#div {
min-height:500px;
Height:auto!important;
height:500px;
}
14. Fixed Footer

#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
Background: #999;
}

/* IE 6 */
* HTML #footer {
Position:absolute;
Top:expression ((0-(footer.offsetheight) + (document.documentElement.clientHeight? Document.documentElement.clientHeight:document.body.clientHeight) + (Ignoreme = Document.documentElement.scrollTop ? DOCUMENT.DOCUMENTELEMENT.SCROLLTOP:DOCUMENT.BODY.SCROLLTOP)) + ' px ');
}
15. Clear Floating Clearfix

/* Slightly enhanced, universal clearfix hack * *
. clearfix:after {
Visibility:hidden;
Display:block;
font-size:0;
Content: "";
Clear:both;
height:0;
}
. clearfix {Display:inline-block;}
/* Start commented backslash hack \*/
* HTML. Clearfix {height:1%;}
. clearfix {Display:block;}
/* Close commented backslash hack */
16. Add a hand cursor to a clickable element

A[HREF], input[type= ' submit '], input[type= ' image '], label[for], select, button,. pointer {
Cursor:pointer;
}
The IPad-oriented CSS

<!--CSS--
@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;}
}

<!--example Markup--
<H1 class= "Portrait" >your Device orientation is "portrait" <H1 class= "Landscape" >your device orientation is "landscape" Text wrapping in Pre tags

pre{
height:120px;
Overflow:auto;
font-family: "Consolas", monospace;
font-size:9pt;
Text-align:left;
Background-color: #FCF7EC;
Overflow-x: auto; /* Use horizontal scroller if needed; For Firefox 2, not
White-space:pre-wrap; /* css-3 */
White-space:-moz-pre-wrap!important; /* Mozilla, since 1999 */
Word-wrap:break-word; /* Internet Explorer 5.5+ */
margin:0px 0px 0px 0px;
padding:5px 5px 3px 5px;
White-space:normal; /* Crucial for IE 6, maybe 7? */
}
CSS3 Media Enquiry

/* Smartphones (Portrait and Landscape)-----------*/
@media only Screens
and (min-device-width:320px)
and (max-device-width:480px) {
/* Styles */
}

/* Smartphones (Landscape)-----------*/
@media only Screens
and (min-width:321px) {
/* Styles */
}

/* Smartphones (Portrait)-----------*/
@media only Screens
and (max-width:320px) {
/* Styles */
}

/* IPads (Portrait and Landscape)-----------*/
@media only Screens
and (MIN-DEVICE-WIDTH:768PX)
and (max-device-width:1024px) {
/* Styles */
}

/* IPads (Landscape)-----------*/
@media only Screens
and (MIN-DEVICE-WIDTH:768PX)
and (MAX-DEVICE-WIDTH:1024PX)
and (Orientation:landscape) {
/* Styles */
}

/* IPads (Portrait)-----------*/
@media only Screens
and (MIN-DEVICE-WIDTH:768PX)
and (MAX-DEVICE-WIDTH:1024PX)
and (orientation:portrait) {
/* Styles */
}

/* Desktops and laptops-----------*/
@media only Screens
and (min-width:1224px) {
/* Styles */
}

/* Large Screens-----------*/
@media only Screens
and (min-width:1824px) {
/* Styles */
}

/* IPhone 4-----------*/
@media
Only screen and (-webkit-min-device-pixel-ratio:1.5),
Only screen and (min-device-pixel-ratio:1.5) {
/* Styles */
}
20. Reset the Load

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, Font, IMG, ins, KBD, Q, S, Samp,
Small, strike, strong, sub, SUP, TT, VAR,
DL, DT, DD, OL, UL, Li,
FieldSet, form, label, legend,
Table, Caption, Tbody, TFOOT, THEAD, tr, TH, TD {
margin:0;
padding:0;
border:0;
outline:0;
Font-weight:inherit;
Font-style:inherit;
font-size:100%;
Font-family:inherit;
Vertical-align:baseline;
}
/* Remember to define focus styles! */
: Focus {
outline:0;
}
Body {
Line-height:1;
Color:black;
Background:white;
}
OL, UL {
List-style:none;
}
/* Tables still need ' cellspacing= "0" ' in the markup * *
Table {
Border-collapse:separate;
border-spacing:0;
}
caption, Th, TD {
Text-align:left;
Font-weight:normal;
}
Blockquote:before, Blockquote:after,
Q:before, Q:after {
Content: "";
}
BLOCKQUOTE, Q {
Quotes: "" ";
}
21. Multi-border

The element must be relatively positioned and have enough padding to display the extra border:

#borders {
position:relative;
Z-index:1;
padding:30px;
border:5px solid #f00;
Background: #ff9600;
}
#borders: Before {
Content: "";
Position:absolute;
Z-index:-1;
top:5px;
left:5px;
right:5px;
bottom:5px;
border:5px solid #ffea00;
Background: #4aa929;
}

#borders: After {
Content: "";
Position:absolute;
Z-index:-1;
top:15px;
left:15px;
right:15px;
bottom:15px;
border:5px solid #00b4ff;
Background: #fff;
}
22. Remove the textarea scroll bar in IE

textarea {Overflow:auto;}
23. Simple but good-looking reference style

Css-blockquote

blockquote {
Background: #f9f9f9;
border-left:10px solid #ccc;
Margin:1.5em 10px;
Padding:.5em 10px;
Quotes: "\201c" "\201d" "\2018" "\2019";
}
Blockquote:before {
Color: #ccc;
Content:open-quote;
Font-size:4em;
Line-height:.1em;
Margin-right:.25em;
Vertical-align:-.4em;
}
BLOCKQUOTE p {
Display:inline;
}
-moz-placeholder.:

<!doctype html>
<title>placeholder demo</title>
<style type= "Text/css" >
Input:-moz-placeholder {
Color:green;
}
</style>
<body>
<input id= "test" placeholder= "placeholder text!" >
</body>
25. Another way to fix footer

* {margin:0; padding:0;}

HTML, body, #wrap {height:100%;}

Body > #wrap {height:auto; min-height:100%;}

#main {padding-bottom:150px;}/* Must be same height as the footer */

#footer {
Position:relative ;
Margin-top: -150px;/* Negative value of footer height */
height:150px;
Clear:both;}

/* CLEAR fix*/
. clearfix:after {content: ".";
Display:block;
height:0;
Clear:both;
Visibility:hidden;}
. clearfix {display:inline-block;}
/* Hides from IE-MAC \*/
* html. clearfix {height:1%;}
. clearfix {display:block;}
/* End hide from Ie-mac */
<div id= "wrap",

<div id= "main" class= "Clearfix";

</div& Gt

</div>

<div id= "Footer";

</div>
26. Transparent Background

. rgba {
Background-color:transparent;
Background-color:rgba (200,200,200,0.8);
Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= #99dddddd, endcolorstr= #99dddddd);
-ms-filter: "Progid:DXImageTransform.Microsoft.gradient (startcolorstr= #99dddddd, endcolorstr= #99dddddd)";
}
27. Center the div element with unknown width

. Content {
margin:0 Auto 8px;
display:table;
}

. Content Div {
Display:table-cell;
}

<!--[If ie]>
. Content {
Display:block;
Text-align:center;
}
. Content Div {
Display:inline;
Zoom:1;
}
<! [endif]-->
28. Set style based on file type

/* External links */
a[href^= "/http"]
{
padding-right:13px;
Background:url (external.gif) no-repeat Center right;
}

/* Emails */
a[href^= "mailto:"]
{
padding-right:20px;
Background:url (email.png) no-repeat Center right;
}

/* PDFs */
A[href$= ". pdf"]
{
padding-right:18px;
Background:url (acrobat.png) no-repeat Center right;
}
29. Solve IE6/7 double margin/padding problem

UL Li
{
Float:right;
margin-right:10px;
*display:inline; /*target IE7 and bellow*/
_display:inline; /*target IE6 and bellow*/
}
/* This example fixes the double right margin bug */
30. Change the style of the selected text

:: Selection
{
Color:white;
background-color:red;
}

::-moz-selection/* Firefox needs an extra attention for this */
{
Color:white;
background-color:red;
}
31. Drop Cap

p:first-letter{
Display:block;
margin:5px 0 0 5px;
Float:left;
Color: #FF3366;
font-size:60px;
Font-family:georgia;
}

30 summary of several useful CSS3 writing effects