Уроки СSS

[TopRaN 235]

Надеюсь админ создаст отдельный раздел для этого и создаст в ней (переименует мою тему)

В данном разделе пользователи смогут подчеркнуть для себя интересные идеи которые смогут применить на своем сайте

Первый урок (переворот картинки без использования Jquery)

 

начнем

 

1. Для начала создадим область (container)  в который поместим 2 блока с содержимым box-front и box-back

<div class="container">    <div class="box-front">        Передняя сторона    </div>    <div class="box-back">        Задняя сторона    </div></div>

2. Когда мы прописали блоки приступим к написанию стилей и соответственно анимации.

<style>.container{        perspective: 800px;        -webkit-perspective: 800px;        background: radial-gradient(#e0e0e0, #aaa);        width:100%;        height:300px;        border-radius:6px;        position:relative;        }.box-front,        .box-back{        transform-style: preserve-3d;        -webkit-transform-style: preserve-3d;         backface-visibility: hidden;        -webkit-backface-visibility: hidden;         width:50%;        height:80%;        position:absolute;        top:10%;        left:25%;        background:#476AF1;        transition:0.8s; text-align:center;        color:#FFF;        }.box-back{        transform:rotateY(180deg);        -webkit-transform:rotateY(180deg);        background-color:#7E0002;        }.container:hover .box-front{                /*пишем эффект при наведении мышкой*/        transform:rotateY(180deg);        -webkit-transform:rotateY(180deg);        }.container:hover .box-back{             /* эффект при убранной мышки*/        transform:rotateY(360deg);        -webkit-transform:rotateY(360deg);        }</style>

Получаем переворачивающую картинку при наведении на нее мышкой

index2.html

[TopRaN 235]

Урок №2 и наверное самый распространенный, но до боли мучающий начинающих вебмастеров это как прижать footer к низу сайта.
Легко ))))

<div id="wrapper-container">   <header id="header">   </header>   <article id="content">   </article></div><footer id="footer"></footer>

соответственно сss

 

html, body {height: 100%;}#wrapper-container {min-height: 100%;}#content {        overflow:auto;    padding-bottom: 150px;} #footer {position: relative;    margin-top: -150px;    height: 150px;    clear:both;}body:before {    content:"";    height:100%;    float:left;    width:0;    margin-top:-32767px;}

Все это конечно хорошо, в современных браузерах все будет просто отлично, но как же быть с надоевшим эксплорером 7? Ясное дело , делаем фикс

<!--[if !IE 7]>    <style type="text/css">        #wrap {display:table;height:100%}    </style>

И наслаждаемся

index2.html

[XTRO 154]

по сабжу: а мы о каком css говорим? 2? 3?

Если 3, то будем использовать препроцессор SASS? какой тогда синтаксис: SCSS (более новый) и SASS (более старый)? Юзаем ли Compass ?

[TopRaN 235]

удалил по просьбе)

[XTRO 154]

Раскопал тут http://enjoycss.com/ (online css3 code generator)

действительно, enjoy !

[TopRaN 235]

Раскопал тут http://enjoycss.com/ (online css3 code generator)

действительно, enjoy !

Действительно хорошая штука! Добавляю в общий список генераторов!

[XTRO 154]

css в js или куда катится мир после JSX