»  Pagina principala  »  Tutoriale »  Background in blur pentru div-uri

Background in blur pentru div-uri

    Acest efect a inceput sa fie tot mai popular prin randul bloggerilor in special. Pentru realizarea lui nu este nevoie de cunostinte avansate de photoshop sau css, ci doar de putina atentie.
    Vom avea nevoie de o imagine de fundal (clara) si una cu efect de blur aplicat cu ajutorul unui editor de imagini. (asupara imaginii de fundal).
    Ca editor de imagini eu am folosit GIMP (care e freeware - se gaseste la un simplu search pe google), programul fiind destul de usor de folosit.
     In rest este html si cateva formatari CSS .
     Vom aplica stilul CSS astfel incat imaginea de background sa se suprapuna perfect cu cea cu blur si atunci cand pagina are inaltimea mai mare si e nevoie de scroll .
     Scopul tutorialului este acela de a obtine un efect ca in imagininea de mai jos. Aveti si link catre un exemplu activ. 

Exemplu

Codul HTML - index.html :
<html>
<head>

    <title>Efect de blur pentru Div-uri</title>
    
    <link rel="stylesheet" type="text/css" href="stil.css" /> /* legatura cu fisierul extern CSS */

</head>
<body>
<center>
<br />
<br />
    <div class="clasa-blur">

        <h2>Div cu efect de blur</h2>
                <p> Continut chenar - Continut chenar - Continut chenar - Continut chenar - </p>
        <p>Oferit de: <a href="http://etutoriale.ro/"><strong>E</strong>tutoriale</a></p>
    
    </div>   /* am repetat acest div de mai multe ori  pentru a putea testa exemplul si cu scroll */

<div class="clasa-blur">

        <h2>Div cu efect de blur</h2>
                <p> Continut chenar - Continut chenar - Continut chenar - Continut chenar - </p>
        <p>Oferit de: <a href="http://etutoriale.ro/"><strong>E</strong>tutoriale</a></p>
    
    </div>


<div class="clasa-blur">

        <h2>DIV cu efect de blur</h2>
                <p> Continut chenar - Continut chenar - Continut chenar - Continut chenar - </p>
        <p>Oferit de: <a href="http://etutoriale.ro/"><strong>E</strong>tutoriale</a></p>
    
    </div>
    
    </center>
</body>

</html>



    Pentru ca imaginea de background sa nu ramana in urma si sa se suprapuna peste cea cu blur si atunci cand facem scroll in pagina i-am aplicat si ei background-attachment: fixed. Acest background-attachment: fixed face ca imaginile sa se suprapuna si ca efectul de blur sa fie posibil.
    Vom aplica si float: left; pentru a pune div-urile unul in continuarea altuia daca ne permite rezolutia in care este deschisa pagina.
     Iata codul CSS (mai raman de editat imaginile):


*                    { margin: 0; padding: 0; } /*se aplica margini 0 la tot documentul */
body                { font: 15px "Times New Roman", Times, serif ;
                       background: url(images/background.jpg) no-repeat fixed; } /* punem imaginea de fundal  - background attachments: fixed; - sa se suprapuna cu cea in blur */

.clasa-blur            { width: 450px;  /* latimea chenarului */
                      margin:15px 15px 15px 15px;
                       background: url(images/background-blur.jpg) no-repeat fixed; /* punem background la chenar imaginea in blur */
                       border: 2px #ffffff solid;
                      padding: 25px 0 0 0;
                      min-height: 159px;
                      float:left;
                    
                      }


    Acum nu mi-a mai ramas de explicat decat cum se editeaza poza cu blur. Foarte simplu: GIMP >  Filters >  Blur > Tileable  Blur  (eu asta am folosit).
     Cam asta a  fost .....





Cristian Bozeanu

Free Mini Games

Cloud tag

tutorial, photoshop, html, css, javascript, flash, php, mysql, grafica 3D, tutorial, coduri, scripturi, generator de coduri, cursuri php