Why [61 - 64]

WHY - TAEYEON

Cześć! To pierwsza notka w lipcu... Muszę przyznać, że strasznie się rozleniwiłam. Dziś przychodzę z różnymi rzeczami: zaczynając od ikonek a kończąc na tutorialu! 

Przypominam tylko, że euleunge nie przyjmuje zamówień, bo nie potrafi ich wykonywać, a jeśli chcecie coś zamówić, to odsyłam Was tu<--
+ możecie napisać euleunge jakieś miłe słówko, bo nie ma jej teraz w domciu :< znajduje się w szpitalu w Warszawie, jakieś 40 kilometrów ode mnie :(( Żeby nie było, wszystko u niej dobrze i jutro zawiozę jej książeczkę do poczytania i Kyungsoo (czytaj: poduszka z Angy Birds z pingwinem, z którym zawsze śpi; ja mam podobną - Jogina ♥ )
Nie przedłużając, zapraszam do obejrzenia prac ^^

ikonki

nagłówki

 

szablony

dla Kleopatry

pobierz

dla Obłąkanej

pobierz

pobierz

nagłówek to gif

pobierz

koloryzacje

A teraz czas na tutorial na zmianę wyglądu takiego gadżetu jak #Profile1

Nie oszukujmy się, ale on nie zawsze ładnie się prezentuje. Udało mi się jednak powymyślać jakieś kodziki, które pomogą w edycji tego nieszczęsnego profilu Bloggera. A to wszystko w CSSie! Nie będzie więc trzeba babrać się w htmlu <:

Najpierw rozbijmy na części pierwsze kody składające się na nasz profil.

Pierwszy, wszystkim dobrze znany #Profile1 (podgląd)

Tym selektorem dużo nie zdziałamy, potrzebne są nam selektory znajdujące się w jego środku <:

#Profile1 h2 - tytuł, równie wszystkim dobrze znany
.profile-img - zdjęcie, nasz avatar
.profile-link - napis Wyświetl mój pełny profil.profile-data - nasza nazwa, nick
.g-profile - logo bloggera (podgląd)

Za pomocą tych selektorów można zrobić coś fajnego ^^

Pokażę Wam kilka kodów i efektów.

1.

#Profile1 h2 {     display: none ; } .profile-img {      border-radius: 100% ;      width: 80px ;      height: 80px ; } .profile-link {     display: none ; } .profile-data {     position: absolute ;     bottom: -5px ;     font-weight: normal ;      font-family: 'Rochester' !important ;     font-size: 30px ;     left: 5px ;    } .g-profile {     background: none !important ; }


2.

podgląd efektu

#Profile1 h2 { display: none ; } .profile-link { display: none ; } .profile-img { border-radius: 50% ; padding: 0px !important; } .profile-name-link, .g-profile { position: absolute ; left: 20px ; display: block ; text-align: center ; top: 18px ; opacity: 0 ; transition:all .5s; -o-transition:all .5s; -webkit-transition:all .5s; -moz-transition:all .5s; height: 80px ; } .profile-name-link:hover, .g-profile:hover { top: -14px ; opacity: 1 ; } a:hover { text-decoration: none !important ; }


3.

#Profile1 h2 { display: none ; } .profile-link { text-transform: uppercase ; font-size: 8px ; letter-spacing: .5px ; background: #1b3814 ; color: #fff !important; padding: 3px ; width: 96px !important; display: inline-block ; text-align: center !important; position: absolute ; bottom: 0px ; left: 15px ; } .profile-img { border: solid 6px #1b3814 ; padding: 5px !important; z-index: 100 ; } .g-profile { background: none !important ; } .profile-data a { text-transform: uppercase ; font-size: 8px ; letter-spacing: .5px ; color: #fff !important; padding: 3px ; width: 96px !important; display: inline-block !important; text-align: center !important; position: absolute ; top: -7px ; left: 15px ; font-weight: normal !important ; z-index: 0 !important; padding-bottom: 0px ; box-shadow: 0px 15px #1b3814 inset ; } a:hover { text-decoration: none !important ; }


4.

podgląd efektu

#Profile1 h2 { display: none ; } .profile-link { color: #b29254 !important ; font-size: 9px ; letter-spacing: 1px ; text-transform: uppercase ; background: #3e2f11 ; padding: 10px ; width: 140px ; display: inline-block ; text-align: center ; position: absolute ; left: 15px ; bottom: 22px ; transition:all 1s; -o-transition:all 1s; -moz-transition:all 1s; -webkit-transition:all 1s; z-index: 0 !important; } .profile-img { background: #b29254 !important; padding-left: 40px !important; padding-right: 40px ; padding-top: 30px ; padding-bottom: 20px ; display: inline-block ; box-shadow: 20px 0px #3e2f11 inset, -20px 0px #3e2f11 inset ; z-index: 100 ; } .g-profile { background: none !important; } .profile-data a { color: #3e2f11 !important ; font-weight: normal ; text-transform: uppercase ; font-size: 9px ; letter-spacing: 1px ; position: absolute ; display: inline-block ; width: 100px !important; text-align: center !important; padding: 0px ; top: 25px ; left: 45px ; z-index: 10000 !important; } a:hover { text-decoration: none !important ; } .profile-link:before { content: '' ; padding: 10px ; background: #3e2f11; display: inline-block ; position: absolute ; transform: rotateZ(45deg) ; -o-transform: rotateZ(45deg) ; -moz-transform: rotateZ(45deg) ; -webkit-transform: rotateZ(45deg) ; bottom: -10px ; left: 25px ; border: solid 2px #b29254 ; transition:all 1s; -o-transition:all 1s; -moz-transition:all 1s; -webkit-transition:all 1s; } .profile-link:hover:before { border: solid 2px #3e2f11 ; transition:all 1s; -o-transition:all 1s; -moz-transition:all 1s; -webkit-transition:all 1s; } .profile-link:hover { bottom: -18px ; }

PS: To działa tylko wtedy gdy ma się konto blogger, nie google +
Mam nadzieję, że kody okażą się Wam pomocne <:


zamówienia przyjmuję tu<--

euleunge hwaiting!