Bună ziua, dragi cititori și invitați ai blogului. Asta îmi place Blogger, este pentru modelul său flexibil și plastic. De fapt, dacă chiar sortați puțin, că îi sfătuiesc foarte mult pe toată lumea, puteți crea un site unic de acest gen. Există o mulțime de oportunități.
Deci, ca în șablonul Blogger, puteți modifica stilul gadgetului. Faceți imaginea ca fundal, în jurul colțurilor, evidențiați gadgetul din cadru și multe altele.
Pentru a începe, mergeți și la fila Șablon - schimbați codul HTML și găsiți aici, în codurile CSS, o astfel de linie
/ * Widgeturi
----------------------------------------------- * /
Asta este ceea ce avem nevoie astăzi. Acum, coborâți puțin și găsiți fragmentul care este responsabil pentru bara laterală a câmpului widgetului .widget
Chiar în spatele bretelei și vom adăuga stiluri CSS. Voi oferi doar câteva opțiuni. Aici, așa cum spun ei, ar fi suficient imaginație. Ceva poate fi eliminat, ceva de adăugat.
1. Faceți fundalul, culoarea, setați lățimea cadrului și rotiți colțurile. Cumva arata cum va arata.
În locul fundalului principal, am folosit o imagine. Dimensiunea cadrului setată la 3 pixeli și setarea culorii # 336699. Adesea începătorii au probleme cu modificarea valorii culorii. Deci, încă o dată, voi acorda atenție. Schimbați doar semnul zăbrelelui și numărul de șase cifre. 10px; rotunjit colțurile widget-ului.
Codul arată așa.
2. Să modificăm puțin parametrii și să adăugăm valoarea boxShadow, mai degrabă decât să setăm umbra exterioară.
border-radius: 20px; / rotunjire colțuri /
fundal: # CCCCCC; / culoare de fundal /
boxShadow
lățime: 80%;
max-lățime: 550px;
marja: 2em auto;
padding: 1em;
box-shadow: 0 0 10px 5px rgba (221, 221, 221, 1);
>
3. Îmi place cu adevărat efectul de umbră pe laturi. Uită-te aici. Te rog, așa cum arată.
boxShadow
lățime: 80%;
max-lățime: 550px;
margine: 10 pixeli automat;
padding: 1em;
box-shadow:
0 1px 4px rgba (0, 0, 0. 3),
-23px 0 20px-23px rgba (0, 0, 0. 8);
>
4. Puteți face o umbră în interiorul blogului.
boxShadow
lățime: 80%;
max-lățime: 550px;
marja: 1em auto;
padding: 1em;
box-shadow: 0 0 40px rgba (0, 0, 0. 1) inset;
>
În general, atunci când adăugați stiluri diferite, puteți realiza cele mai incredibile conversii de design gadget. Cine este interesat de acest lucru, vă propun să analizați și alte efecte care pot fi aplicate în acest caz pe acest site.
Mereu bucuros să răspund la întrebările dvs. Pentru ziua de azi, am totul. Ne vedem curând. Mulțumesc că ați citit pătuțurile mele.
Oh, dar ce este mai mic? Apăsăm!
Articole similare
Trimiteți-le prietenilor: