12 Полезных CSS-кодов для WEB-Разработчиков

<!-- Разметка: -->
<div class="wraptocenter"><span></span><img src="..." alt="..."></div>
     
<!-- CSS код: -->

<style type="text/css">
    .wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: ...;
    height: ...;
    }
    .wraptocenter * {
    vertical-align: middle;
    }
    /*\*//*/
    .wraptocenter {
      display: block;
    }
    .wraptocenter span {
      display: inline-block;
      height: 100%;
      width: 1px;
    }
    /**/
    </style>
    <!--[if lt IE 8]><style>
    .wraptocenter span {
    display: inline-block;
    height: 100%;
    }
    </style><![endif]-->

•  font-family: Arial, Helvetica, sans-serif;
•  font-family: 'Arial Black', Gadget, sans-serif;
•  font-family: 'Bookman Old Style', serif;
•  font-family: 'Comic Sans MS', cursive;
•  font-family: Courier, monospace;
•  font-family: 'Courier New', Courier, monospace;
•  font-family: Garamond, serif;
•  font-family: Georgia, serif;
•  font-family: Impact, Charcoal, sans-serif;
•  font-family: 'Lucida Console', Monaco, monospace;
•  font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
•  font-family: 'MS Sans Serif', Geneva, sans-serif;
•  font-family: 'MS Serif', 'New York', sans-serif;
•  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
•  font-family: Symbol, sans-serif;
•  font-family: Tahoma, Geneva, sans-serif;
•  font-family: 'Times New Roman', Times, serif;
•  font-family: 'Trebuchet MS', Helvetica, sans-serif;
•  font-family: Verdana, Geneva, sans-serif;
•  font-family: Webdings, sans-serif;
•  font-family: Wingdings, 'Zapf Dingbats', sans-serif;

/* CSS text gradients */
h2[data-text] {
position: relative;
}
h2[data-text]::after {
content: attr(data-text);
z-index: 10;
color: #e3e3e3;
position: absolute;
top: 0;
left: 0;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,1)),
}

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;
}

/* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
    display: block;
}
    body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
    blockquote, q {
    quotes: none;
}
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: '';
    content: none;
}
    table {
    border-collapse: collapse;
    border-spacing: 0;
}

ul li {
    color: black;
    list-style-type: none;
}

ul li:before {
    color: red;
    float: left;
    margin: 0 0 0 -0.89em;
    font-size: 2em;
    content: '\2022';
}

#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');
}

blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}

@charset "UTF-8";
/*
    User Submitted Posts - CSS Stylesheet

http://perishablepress.com/user-submitted-posts/

    Notes: complete list of CSS hooks for the submission form @ http://m0n.co/e
    This is a complete CSS skeleton of all elements and hooks in the submission form.
    Use what you need and then delete any empties to lighten the file.
*/
div#user-submitted-posts {}
div#user-submitted-posts form {}
div#user-submitted-posts fieldset {}
div#user-submitted-posts fieldset label {}
div#user-submitted-posts fieldset input {} /* excludes submit button */

div#user-submitted-posts input {}
div#user-submitted-posts label {}
div#user-submitted-posts textarea {}
div#user-submitted-posts select {}
div#user-submitted-posts option {}

.usp-input {}
.usp-textarea {}

form#usp_form {}

fieldset.usp-name {}
fieldset.usp-url {}
fieldset.usp-title {}
fieldset.usp-tags {}
fieldset.usp-category {}
fieldset.usp-content {}

fieldset.usp-captcha {}
div#user-submitted-posts fieldset.usp-captcha input {}

fieldset.usp-images {}
fieldset.usp-images label {}
div#user-submitted-posts input.usp-clone {}

div#usp-upload-message {}
div#user-submitted-image {}
a#usp_add-another {}

fieldset#coldform_verify {}
div#usp-submit {}

div#usp-error-message {}
div#usp-success-message {}

div.usp-input-error {}
div.usp-input-error span {}

div.usp_text-editor {}
.usp-rich-textarea {}

/*****
SCSS CSS 3 Property Maxin v 0.1
by Dele O
 *******/

@mixin rounded($radius: 10px) {
  border-radius: $radius;
 -moz-border-radius: $radius;
 -webkit-border-radius: $radius;
}


@mixin roundedSides($topLeft, $topRight, $bottomRight, $bottomLeft) {
  -moz-border-radius-topleft: $topLeft;
  -moz-border-radius-topright: $topRight;
  -moz-border-radius-bottomright: $bottomRight;
  -moz-border-radius-bottomleft: $bottomLeft;
  border-top-left-radius:$topLeft;
  border-top-right-radius: $topRight;
  border-bottom-right-radius: $bottomRight;
  border-bottom-left-radius: $bottomLeft;
}


@mixin shadow( $off-y, $off-x, $blur, $color){
  -moz-box-shadow: $off-y $off-x $blur $color; /* FF3.5+ */
  -webkit-box-shadow:  $off-y $off-x $blur $color; /* Saf3.0+, Chrome */
  box-shadow:  $off-y $off-x $blur $color; /* Opera 10.5, IE9 */
}

@mixin gradient($baseColor, $toColor){
  background-color:$baseColor;
  background-image: -moz-linear-gradient(top, $baseColor, $toColor); /* FF3.6 */
  background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, $baseColor),color-stop(1, $toColor));  /* Saf4+, Chrome */
  background-image: linear-gradient(top,$baseColor, $toColor);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='$baseColor', EndColorStr='$toColor'); 
}


@mixin trasition($property, $duration:0.3s, $function: ease-out){
  -moz-transition: $property $durations $function;  /* FF3.7+ */
  -o-transition: $property $durations $function;  /* Opera 10.5 */
  -webkit-transition: $property $durations $function;  /* Saf3.2+, Chrome */
  transition: $property $durations $function;
}


@mixin transform($scale, $rotate, $trans-x, $trans-y, $skew-x, $skew-y){
  -moz-transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew(skew-x, skew-y);
  -webkit-transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew(skew-x, skew-y);
  -o-transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew(skew-x, skew-y);
  -ms-transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew(skew-x, skew-y);
  transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew(skew-x, skew-y);
}