8. Going Further 2

Urmărind acest tutorial:

http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/

am încercat să aplic un efect asemănător restul elementelor din galeria mea. Astfel am modificat codul HTML în felul următor:

<li>
<img src=”images/preview.jpg” alt=”preview” />
<div><h3>Title</h3>
<p>Câteva informații</p>
<a href=”#”>Citește mai mult…</a>
</div>
</li>
<li>
<img src=”images/preview.jpg” alt=”preview” />
<div><h3>Title</h3>
<p>Câteva informații</p>
<a href=”#”>Citește mai mult…</a>
</div>
</li>
<li>
<img src=”images/preview.jpg” alt=”preview” />
<div><h3>Title</h3>
<p>Câteva informații</p>
<a href=”#”>Citește mai mult…</a>
</div>
</li>
<li>
<img src=”images/preview.jpg” alt=”preview” />
<div><h3>Title</h3>
<p>Câteva informații</p>
<a href=”#”>Citește mai mult…</a>
</div>
</li>
<li>
<img src=”images/preview.jpg” alt=”preview” />
<div><h3>Title</h3>
<p>Câteva informații</p>
<a href=”#”>Citește mai mult…</a>
</div>
</li>
<li>
<img src=”images/preview.jpg” alt=”preview” />
<div><h3>Title</h3>
<p>Câteva informații</p>
<a href=”#”>Citește mai mult…</a>
</div>
</li>

și fișierul style.css în felul următor:

.view {
width: 300px;
height: 225px;
margin: 10px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url(images/preview2.jpg) no-repeat center center
}
.view .mask, .view .content {
width: 300px;
height: 225px;
position: absolute;
overflow: hidden;
top: 0;
left: 0
}
.view img {
display: block;
position: relative
}
.view h3 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 1px #000
}
.view a.info:hover {
box-shadow: 0 0 5px #000
}

.view-first img {
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.view-first .mask {
-ms-filter: “progid: DXImageTransform.Microsoft.Alpha(Opacity=0)”;
filter: alpha(opacity=0);
opacity: 0;
background-color: rgba(219,127,8, 0.7);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.view-first h2 {
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-o-transform: translateY(-100px);
-ms-transform: translateY(-100px);
transform: translateY(-100px);
-ms-filter: “progid: DXImageTransform.Microsoft.Alpha(Opacity=0)”;
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-first p {
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-o-transform: translateY(100px);
-ms-transform: translateY(100px);
transform: translateY(100px);
-ms-filter: “progid: DXImageTransform.Microsoft.Alpha(Opacity=0)”;
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.view-first:hover img {
-webkit-transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1);
-o-transform: scale(1.1,1.1);
-ms-transform: scale(1.1,1.1);
transform: scale(1.1,1.1);
}
.view-first a.info {
-ms-filter: “progid: DXImageTransform.Microsoft.Alpha(Opacity=0)”;
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-first:hover .mask {
-ms-filter: “progid: DXImageTransform.Microsoft.Alpha(Opacity=100)”;
filter: alpha(opacity=100);
opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
-ms-filter: “progid: DXImageTransform.Microsoft.Alpha(Opacity=100)”;
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
.view-first:hover p {
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.view-first:hover a.info {
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}

Rezultatul poate fi descărcat de aici (179 kB).
Advertisements

7. Going Further 1

Urmărind acest tutorial:

http://tympanus.net/codrops/2011/12/26/css3-lightbox/

am încercat să fac aplic același efect primelor 3 elemente din galeria mea. Astfel, am modificat în codul HTML lista în felul următor:

<li>
<a href=”#previewbig”>
<img src=”images/preview.jpg” alt=”preview” />
</a>
<div id=”previewbig”>
<img src=”images/previewbig.jpg” alt=”previewbig” />
<a href=”#portofolio”>x Close</a>
</div>
</li>
<li>
<a href=”#previewbig”>
<img src=”images/preview.jpg” alt=”preview” />
</a>
<div id=”previewbig”>
<img src=”images/previewbig.jpg” alt=”previewbig” />
<a href=”#portofolio”>x Close</a>
</div>
</li>
<li>
<a href=”#previewbig”>
<img src=”images/preview.jpg” alt=”preview” />
</a>
<div id=”previewbig”>
<img src=”images/previewbig.jpg” alt=”previewbig” />
<a href=”#portofolio”>x Close</a>
</div>
</li>

și fișierul syle.css adăugându-i următoarele rânduri din codul atașat pe site:

.lb-overlay{
width: 0px;
height: 0px;
position: fixed;
overflow: hidden;
left: 0px;
top: 0px;
padding: 0px;
z-index: 99;
text-align: center;
background: rgb(241,210,194);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%, rgba(241,210,194,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.56)), color-stop(100%,rgba(241,210,194,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
}
.lb-overlay > div{
position: relative;
color: rgba(27,54,81,0.8);
opacity: 0;
filter: alpha(opacity=0); /* internet explorer */
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(opacity=0)”; /*IE8*/
width: 700px;
margin: 10px auto 0px auto;
text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
-webkit-transition: opacity 0.3s linear 1.3s;
-moz-transition: opacity 0.3s linear 1.3s;
-o-transition: opacity 0.3s linear 1.3s;
-ms-transition: opacity 0.3s linear 1.3s;
transition: opacity 0.3s linear 1.3s;
}
.lb-overlay a.lb-close{
background: rgba(27,54,81,0.8);
z-index: 1001;
color: #fff;
position: absolute;
top: 43px;
left: 50%;
font-size: 15px;
line-height: 26px;
text-align: center;
width: 50px;
height: 23px;
overflow: hidden;
margin-left: -25px;
opacity: 0;
filter: alpha(opacity=0); /* internet explorer */
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(opacity=0)”; /*IE8*/
-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
-webkit-transition: opacity 0.3s linear 1.2s;
-moz-transition: opacity 0.3s linear 1.2s;
-o-transition: opacity 0.3s linear 1.2s;
-ms-transition: opacity 0.3s linear 1.2s;
transition: opacity 0.3s linear 1.2s;
}
.lb-overlay img{
/* height: 100%; For Opera max-height does not seem to work */
max-height: 100%;
position: relative;
-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
-moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
box-shadow: 0px 2px 7px rgba(0,0,0,0.2);
}

.lb-overlay:target {
width: auto;
height: auto;
bottom: 0px;
right: 0px;
padding: 80px 100px 120px 400px;
}
.lb-overlay:target img {
-webkit-animation: fadeInScale 1.2s ease-in-out;
-moz-animation: fadeInScale 1.2s ease-in-out;
-o-animation: fadeInScale 1.2s ease-in-out;
-ms-animation: fadeInScale 1.2s ease-in-out;
animation: fadeInScale 1.2s ease-in-out;
}
.lb-overlay:target a.lb-close,
.lb-overlay:target > div{
opacity: 1;
filter: alpha(opacity=99); /* internet explorer */
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(opacity=99)”; /*IE8*/
}
@-webkit-keyframes fadeInScale {
0% { -webkit-transform: scale(0.6); opacity: 0; }
100% { -webkit-transform: scale(1); opacity: 1; }
}
@-moz-keyframes fadeInScale {
0% { -moz-transform: scale(0.6); opacity: 0; }
100% { -moz-transform: scale(1); opacity: 1; }
}
@-o-keyframes fadeInScale {
0% { -o-transform: scale(0.6); opacity: 0; }
100% { -o-transform: scale(1); opacity: 1; }
}
@-ms-keyframes fadeInScale {
0% { -ms-transform: scale(0.6); opacity: 0; }
100% { -ms-transform: scale(1); opacity: 1; }
}
@keyframes fadeInScale {
0% { transform: scale(0.6); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

Rezultatul îl puteți găsi aici (179 kB).

6. Try it by yourself

Puteți descărca fișierele pentru a le testa de aici (170kB).

5. Secțiunea Contact

input[type=”text”] { width: 400px; }
textarea { width: 750px; height: 275px; }
label { color: #ff5400; }
input, textarea { background-color: rgba(255, 255, 255, 0.4); border: 5px solid rgba(122, 192, 0, 0.15); padding: 10px; font-family: yanone, Arial; color: #4b4b4b; font-size: 24px; -webkit-border-radius: 5px; margin-bottom: 15px; margin-top: -10px; }
input:focus, textarea:focus { border: 5px solid #ff5400; background-color: rgba(255, 255, 255, 1); }

-se personalizează casetele text;

input[type=”submit”] { border: none; cursor: pointer; color: #fff; font-size: 24px; background-color: #7ac000; padding: 5px 36px 8px 36px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6); border-bottom: 1px solid rgba(0, 0, 0, 0.4); border-top: 1px solid rgba(255, 255, 255, 0.6);
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.23, #619702),
color-stop(0.62, #7ac000)
);
background: -moz-linear-gradient(
center bottom,
#619702 23%,
#7ac000 62%
);
}

-se personalizeaza butonul de submit. De notificat folosirea gradientului;

input[type=”submit”]:hover { color: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.4); background-color: #ff5400;
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.23, #c34000),
color-stop(0.62, #ff5400)
);
background: -moz-linear-gradient(
center bottom,
#c34000 23%,
#ff5400 62%
);
}

input[type=”submit”]:active { position: relative; top: 1px; }

-se personalizeaza butonul submit în mod hover și activ;

Rezultatul:

4. Secțiunile

section { margin-bottom: 700px; padding-top: 150px; float: left; }

-fiecare element de tip <section> are o margine de 700px în partea de jos, 150px fața de marginea de sus și se așează la stânga;

#intro a img { border: 5px solid rgba(122, 192, 0, 0.15); -webkit-border-radius: 5px; margin-top: 40px; margin-bottom: 5px; }
#intro a img:hover, #portfolio .work a img:hover, input:hover, textarea:hover { border: 5px solid rgba(122, 192, 0, 1); -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4); }
#intro a img:active, #portfolio .work a img:active { -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); }

-se personalizează îmaginile din secțiunea intro care sunt ancore în felul următor: contur de 5px solid colorat;

-se personalizează modul de afișare la hover și la click al imaginilor din secțiunea intro care sunt ancore, al imaginilor din secțiunea portofolio din clasa work sau imaginile care sunt ancore, al elementelor de tip input și textarea, schimbându-li-se cularea și adăugându-li-se umbre;

#portfolio ul.work a { border-bottom: none; }
#portfolio ul.work a img { border: 5px solid rgba(122, 192, 0, 0.15); -webkit-border-radius: 5px; }
#portfolio ul.work { float: left; margin-left: -15px; width: 975px;  }
#portfolio ul.work li { list-style: none; float: left; margin-left: 15px; margin-bottom: 15px; }

-se personalizează elementele din lista din secțiunea portofoliu;

#contact { margin-bottom: 0px; }

-secțiunii contact i se elimină marginea față de următorul element. Se dorește acest spațiu între secțiuni pentru a crea iluzia deplasării la o altă pagină atunci când se acționează un link din meniu. Cum secțiunea contact e ultima, nu mai are nevoie de spațiu inutil sub ea.

footer { float: left; margin-top: 50px; width: 100%; }
footer ul { margin-bottom: 150px; }
footer ul li { display: inline; margin-right: 50px; }
footer ul li a { font-size: 24px; margin-left: 10px; }
footer ul li img { vertical-align: bottom; position: relative; top: 2px; }

-se personalizează și footerul într-un mod asemănător;

În acest moment site-ul ar trebui să arate în felul următor:

This slideshow requires JavaScript.

3. Meniul / Bara de navigație

Meniul este definit în HTML de tagurile <nav></nav> iar bara de meniuri în sine este închisă în <header></header>.

header { padding: 5px 0; width: 100%; heightȘ 30px; background-color: #000; margin-bottom: 25px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); position: fixed; z-index: 10; float: left; }

-se definește o spațiere de 5px fața de marginile top și bottom, lățime 100% din pagină,  fundal negru, marginea de jos la 25px, umbra, transparență 0.4 și fixă pe axa z la 10 pixeli;

nav { width: auto; float: left; }
nav ul { position: absolute; right: 0; display: block; margin-top: 0px; }
nav ul li { display: inline; margin-left: 50px; }
nav ul li a { font-size: 24px; border-bottom: none; }

-elementele listei (linkurile de navigare) sunt afișate pe acceași linie, în acceași poziție ca și bara de mai sus;

#headercontainer, #contentcontainer { width: 960px; margin: 0 auto; position: relative; }
#contentcontainer { float: none; padding-top: 0px; }

-se definesc proprietățile containerelor cu ajutorul id-urilor;

Rezultatul arată în felul următor:

2. Style.css – Basics

@font-face {
font-family: yanone;
src: url(‘fonts/YanoneKaffeesatz-Regular.ttf’);
}

-adaugă un font nou care nu face parte din categoria web-safe fonts;

body { font-family: yanone; color: #4b4b4b; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); }

-se aplică fontul asupra întregului conținut, adăugându-i-se culoare și umbră;

::selection { background-color: rgba(122, 192, 0, 0.2); }
::-moz-selection { background-color: rgba(122, 192, 0, 0.2); }

-se modifică culooare backgroundului textului la selecție;

h2 { padding-left: 100px; font-size: 66px; color: #ff5400; height: 105px; }

-se adaugă un indent, se modifică dimensiunea și culoarea headingurilor de nivel 2

a { color: #7ac000; text-decoration: none; border-bottom: 1px solid #7ac000; padding-bottom: 2px; }
a:hover { color: #ff5400; text-decoration: none; border-bottom: 1px solid #ff5400; padding-bottom: 2px; -webkit-transform: rotate(-1deg) scale(0.95); }
a:active { color: #ff5400; text-decoration: none; border-bottom: 1px solid #ff5400; padding-bottom: 2px; position: relative; top: 1px; }

-se modifică proprietățile de afișarea a linkurilor în cele 3 stări;

p { font-size: 24px; margin-bottom: 15px; line-height: 36px; }

-se adaugă spațiere paragrafelor;

În acest moment tot textul este personalizat și pagina ar trebui să arate în felul următor:

 

 

1. Basic Start

Scopul: plecând de la un schelet HTML5, folosind exclusiv CSS3 să obțin un aspect cât se poate de deosebit.

Așa arată în primă fază site-ul:

Acesta este codul:

http://codeviewer.org/view/code:279c

De notificat noile taguri oferite de HTML5 care ofera semantica mult mai clara codului si usurinta cand se trece la stylesheets:

<header>

<section>

<nav>

<footer>

Advertisements