Noi efecte interesante ce le poți face cu CSS3

Vă mai aduceți aminte cum trebuia să folosim Javascript pentru a face colțuri rotunjite…sau pentru a face mici animații?La acea vreme nouă ni s-ar fi părut de domeniul sf-ului să facem aceste lucruri și multe altele folosind numai CSS3(sună ca ceva ce a avut loc acum 100 de ani, dar pentru mine sunt vorba de 2-3 ani; asta ca să vă faceți o idee cu ce înseamnă mult în acest domeniu).Și iată totuși că imposibilul a devenit în ultima vreme posibil, prin standardizarea în browserele moderne a unor noi funcții CSS3, care ne simplifică cu adevărat viața de web designer.

 

1.Animațiile în CSS3

Adesea, când vrem să facem un website ne confruntăm cu problema  micilor animații.Pentru ele, trebuia să recurgem de cele mai multe ori la Javascript și pentru mine asta la început a fost un chin că nu știam sintaxa.Iată că lucrurile s-au mai schimbat și simplificat, spre fericirea web designerilor care nu se prea împacă așa de bine cu limbajele de programare.
 
Animațiile CSS sunt  în final disponibile în toate browserele majore(iar aici vorbim numai de IE10).Sunt două moduri prin care putem crea animații.Primul e chiar foarte simplu și e realizat prin animarea schimbărilor proprietăților CSS cu declarația transition.Cu transition poți crea efecte de hover sau mouse down, sau poți iniția animația schimbând stilul unui element cu Javascript.Din păcate, nu mi-a venit în minte să vorbesc și despre transition în videotutorialul dedicat animațiilor, dar voi include codul demo.În exemplul de mai jos vei vedea tranziția atunci când vei trece cu mouse-ul peste planeta, racheta apropiindu-se de ea.
 
A doua metoda de definire a animațiilor este un pic mai complicată – ea constă în descrierea momentelor specifice ale animației cu regula @keyframe.Asta ne permite să avem animații ce se repetă, dar nu depind de user sau Javascript pentru a fi inițializate.

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<html>
<head>
    <title></title>
    <style type="text/css">
    .container {
        width:300px;
        height:300px;
        margin:0 auto;
        position:relative;
        overflow: hidden;
    }
    .planet {
        position:absolute;
        top:0;left:0;
        width:100%;
        height:100%;
        background:url('planet.png') no-repeat center center;
    }
    .racheta {
        position:absolute;
        top:0;left:0;
        width:100%;
        height: 100%;
        background: url('vega.png') no-repeat 0px center;

        -webkit-animation:orbit 2s linear infinite;
        animation: orbit 2s linear infinite;
                transition: background-position .8s;
    }
        .container:hover .racheta{
            background-position:80px center;
        }
    @keyframes orbit {
        from {
            transform:rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    @-webkit-keyframes orbit {
        from {
            -webkit-transform:rotate(0deg);
        }
        to {
            -webkit-transform: rotate(360deg);
        }
    }
    </style>
</head>
<body>
<div class="container">
    <div class="planet"></div>
    <div class="racheta"></div>
</div>
</body>
</html>


 

2.Funcția calc

O funcție de-a dreptul grozavă din CSS3 e calc – ea ne permite să calculăm o lățime printr-o serie de scăderi și adunări, în funcție de ce ne dorim.Mai mult de atât putem să amestecăm unitățile de măsură făcând calcule între procente și pixeli de exemplu.Asta ne permite să scăpăm de ceea ce altădată ar fi necesitat poate o groază de hack-uri layout.Vestea bună e că merge și în IE9, fără prefixe.
 
În exemplul de mai jos vom face un container cu 40 de px mai scurt ca lungimea totală a browserului.

1
2
3
4
5
6
7
8
9
10
11
.container{

    /* Calculam  lățimea */
    width: calc(100% - 40px);

    background-color:#CDEBC4;
    color:#6D8B64;
    text-align:center;
    padding:25px 0;
    margin: 0 auto;
}

 

3.Coloane în CSS3

Ziarul…ne mănâncă zilele, dar ne inspiră în design-uri.Cum putem crea și utiliza cu succes într-un website coloanele specifice ziarelor și revistelor.Până de curând treaba asta ar fi fost oarecum un chin dacă ți-ai fi propus să NU utilizezi div-uri sau liste pentru a crea coloanele utilizându-te de proprietatea float.Cu siguranța ar fi trebuit să recurgi la Javascript sau la ceva server side programming pentru a sparge paragraful în mai multe bucăți.După cum puteți și constanta treaba asta e de-a dreptul inutilă și nu pierzi decât timp de la alte lucruri mai importante.Spre norocul nostru proprietatea columns.

1
2
3
<div class="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pellentesque urna nec eros ornare, ac tristique diam porta. Donec fermentum velit eget dignissim condimentum. Sed rutrum libero sit amet enim viverra tristique. Mauris ultricies ornare arcu non adipiscing. Sed id ipsum vitae libero facilisis pulvinar id nec lacus. Ut lobortis neque et luctus mattis. Morbi nunc diam, elementum rutrum tellus non, viverra mattis diam. Vestibulum sed arcu tincidunt, auctor ligula ut, feugiat nisi. Phasellus adipiscing eros ut iaculis sagittis. Sed posuere vehicula elit vel tincidunt. Duis feugiat feugiat libero bibendum consectetur. Ut in felis non nisl egestas lacinia. Fusce interdum vitae nunc eget elementum. Quisque dignissim luctus magna et elementum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed nunc lorem, convallis consequat fermentum eget, aliquet sit amet libero.</p>
</div>
1
2
3
4
5
6
7
8
9
10
11
.container{
    width: 500px;
    margin: 0 auto;
}

/* ---- si acum  vedem cat e de dificil sa cream coloane în CSS3*/
.container p{
    -moz-columns:3;
    -webkit-columns:3;
    columns:3;
}

 

4.Gradientele

Gradientele sunt cea mai bună posibilitate prin care designerii pot să creeze tranziții fluide între culori fără a recurge la imagini.Avantajul cu gradientele CSS e că ele seamănă cu imaginile sau mai bine zis cu grafica vectorială – SVG-urile, așa că le poți utiliza cu cea mai mare ușurință și pe retina displays.Ele pot fi liniare sau radiale și pot fi setate să se repete.Ele sunt de ceva vreme pe aici, dar numai în ultima vreme cu câteva schimbări minore la sintaxa au devenit disponibile peste tot, fără prefixe.

1
2
3
4
5
6
<div class="container">
    <div id="el1">Liniar</div>
    <div id="el2">Radial</div>
    <div id="el3">Liniar repetitiv</div>
    <div id="el4">Radial repetitiv</div>
</div>
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
34
35
36
37
.container{
    text-align:center;
    padding:20px 0;
    width:450px;
    margin: 0 auto;
}

.container div{
    width:100px;
    height:100px;
    display:inline-block;
    margin:2px;

    box-shadow: 0 0 1px rgba(0, 0, 0, 0.5) inset, 0 1px 1px #DDD;
    border-radius:2px;

    color:#666;
    vertical-align: top;
    line-height: 230px;
    font-size: 12px;
}

#el1{
    background:linear-gradient(to bottom, #8dd2d9 , #58c0c7);
}

#el2{
    background:radial-gradient(#77d19e,#46c17b);
}

#el3{
    background:repeating-linear-gradient(-45deg, #de9dd4, #de9dd4 5px, white 5px, white 10px);
}

#el4{
    background:repeating-radial-gradient(#b8e7bf, #b8e7bf 5px, white 5px, white 10px);
}

Ștefănescu Marian

Pasionat de științe exacte, drumeții.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.