Aina silloin tällöin tulee vastaan tilanteita, joissa tarvitaan yksinkertaista elävöitystä valikoille. Ja useinmiten tälläisen kysyjä on luokkaa Harrin Purkkapaja, joka ei raaski maksaa työstä mitään. Ja silloin tulee mieleen, että kuinkakohan sen tekisi. Ja äkkiseltään silloin tulee vastaukseksi käyttää tyylisivuja yksinkertaisen “animaation” tekemiseen.
Yksinkertainen tapa luoda omia “animaatiota” on käyttää CSS3- tyylin omia työkaluja apuna. Pienellä mielikuvituksella yksinkertainenkin menu saa uskottavuutta ja näyttävyyttä. Eli CSS3 mahdollistaa kohtuullisen monipuolisen elementtien käsittelyn ja tällä kertaa demotaan lyhyesti vain muutamaa sen toimintoa eli esitellään transition ja transform- ominaisuuksien käyttöä animoidun valikon tekemisessä.
Kyseinen demo toimii yleisesti ottaen muissa selaimissa paitsi IE:ssä, jolle on tehty ehdollinen oma tyylisivun lisäys. Eli demossa esitellään lyhyesti kuinka saadaan aikaiseksi pienellä viiveellä menuelementin koon sekä ulkoasun vaihto.
<nav> <ul> <li><a href="#">Duunit</a></li> <li><a href="#">Rekry</a></li> <li><a href="#">Ota yhteyttä</a></li> </ul> </nav>
Valikko on tehty yksinkertaisella listalla, joka muotoillaan menuksi muutamalla tyylisivun ohjeella. Lähtökohtaisesti menuvalikko muotoillaan seuraavasti:
.bmenu{
padding: 0px;
margin: 0 0 10px 0;
position: relative;
}
.bmenu li{
font-size: 30px;
display: block;
}
Eli tuolla syntyy perusmenun listanäyttö. Ja sen lisäksi muotoillaa linkkielementtiä sekä sen ulkoasua silloin kun kursori tulee sen päälle. Oletusarvoisesti tekstejä hiukan piennennetään sekä siirtymä tilasta toiseen määritellään puoleksi sekunniksi. Tällä saadaan hiukan näyttävyyttä mukaan.
.bmenu li a{
white-space: nowrap;
color: #fff;
display: block;
text-transform: uppercase;
text-align: center;
text-shadow: 0px 0px 10px #fff;
letter-spacing: 1px;
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
}
Koodi näyttää hiukan sekavalta, koska siellä on jouduttu tekemään määritykset muille selaimille kuin IE:lle varmuuden vuoksi. IE:llä kyseinen tyylisivun pätkä ei toimi. Tuosta ylläolevasta ilmenee, että tekstin koko skaalataan puoleen oletusarvosta sekä siirtymä on se puoli sekunttia.
Kursorin siirtyessä tekstin päälle muokataan teksti alkupeäisen kokoiseksi sekä muututeen kursiiviksi skew- komennon avulla.
.bmenu:hover li a{
text-shadow: 0px 0px 25px #fff;
}
.bmenu li a:hover{
text-shadow: 0px 0px 1px #fff;
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
-moz-transform: skew(-25deg);
-webkit-transform: skew(-25deg);
-o-transform: skew(-25deg);
transform: skew(-25deg);
}
Eli noin pienillä asioilla saadaan kevyesti animoitu valikko aikaiseksi. Ja pikku demoa voi käydä vilkaisemassa täältä http://www.karivahtolammi.com/demoja/index.html.
Harrastamalla enemmänkin näitä voi tehdä melkoisen näyttäviäkin valikoita sekä muita elementtejä. ja ehkäpä toisella kertaa esittelen hiukan upeamman demon CSS:n käytöstä. Mutta tuossa on hiukan purtavaa ja mietittävää siihen, mitä tyylisivuilla voi saada aikaiseksi.
Kuhan leikin, Kari…
P.S. Demon koodit ovat alla:
HTML-sivu (html5)
<!DOCTYPE html> <html lang="en"> <head> <title>Css demo</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="CSS-demo" /> <meta name="keywords" content="css3, transitions" /> <meta name="author" content="kVa" /> <link rel="stylesheet" type="text/css" href="demo.css" /> <!--[if IE]> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]--> </head> <body> <header> <nav> <ul> <li><a href="#">Duunit</a></li> <li><a href="#">Rekry</a></li> <li><a href="#">Ota yhteyttä</a></li> </ul> </nav> <img src="./logo.jpg" alt="tausta" /> </header> </body> </html>
Tyylisivu:
/* resetointi */
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
html,body {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
input{
border:1px solid #b0b0b0;
padding:3px 5px 4px;
color:#979797;
width:190px;
}
address,caption,cite,code,dfn,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
/* General Demo Style */
body{
background-color: transparent;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: auto, cover;
-moz-background-size: auto, cover;
-o-background-size: auto, cover;
background-size: auto, cover;
color: #fff;
font-family: Arial, sans-serif;
font-size: 15px;
}
.container{
position:relative;
}
a{
color: #fff;
text-decoration: none;
}
.clr{
clear: both;
}
.content{
position:relative;
width:580px;
margin: 0 auto;
}
h1{
margin:0px;
padding:20px;
font-size:42px;
color:#fff;
text-align:left;
font-weight:400;
text-align:left;
}
h1 span{
font-size:22px;
color:#ddd;
padding-top:10px;
}
header {
position: absolute;
left: 0;
width: 100%;
height: 150px;
background-color: #13013b;
}
header img {
position: absolute;
top: 0;
right: 0;
width: 361px;
height: 150px;
}
/* Blurraus */
nav {
position: absolute;
left: 0;
width: 30%;
height: 150px;
background-color: #13013b;
}
.bmenu{
padding: 0px;
margin: 0 0 10px 0;
position: relative;
}
.bmenu li{
font-size: 30px;
display: block;
}
.bmenu li a{
white-space: nowrap;
color: #fff;
display: block;
text-transform: uppercase;
text-align: center;
text-shadow: 0px 0px 10px #fff;
letter-spacing: 1px;
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.bmenu:hover li a{
text-shadow: 0px 0px 25px #fff;
}
.bmenu li a:hover{
text-shadow: 0px 0px 1px #fff;
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
-moz-transform: skew(-25deg);
-webkit-transform: skew(-25deg);
-o-transform: skew(-25deg);
transform: skew(-25deg);
}