Lubisz flat white? Programujmy wspólnie. Przy kawie.
  • Blog
  • Lifestyle
  • Linux
  • Programowanie
    • Open source
    • PHP
    • Porady
    • REST
    • SQL
31 stycznia 2012 przez Przemysław Sobolewski 0
Porady

Efekt 3D tekst w CSS3.

Efekt 3D tekst w CSS3.
31 stycznia 2012 przez Przemysław Sobolewski 0
Porady


 

 

Dzisiaj zajmiemy się cieniami do tekstu. Zastosujemy w tym celu CSS3. Poniżej możesz przetestować bądź ściągnąć gotowy przykład.

 

ZOBACZ DEMO ŚCIĄGNIJ PRZYKŁAD

 

 

 

 

CSS3 daje nam wiele możliwości wśród dodawania cieni tekstowi (text-shadow).
Zazwyczaj definiowane jest to tak:

[code lang=”css”]
.shadow {
text-shadow: 2px 2px 4px #000; //[X] [Y] [rozmiar cienia] [kolor]
}
[/code]

 

Można również zastosować wiele cieni do tego samego tekstu:

[code lang=”css”]
.shadow {
text-shadow: 1px 1px 0 black,
2px 2px 0 black;
}
[/code]

 

Wszystkie cienie oddzielamy przecinkami tak jak powyższym przykładzie.

Poniżej zastosowanie cieni wraz z akcjami :hover ( po najechaniu na element):

[code lang=”css”]
.shadow {
color: white;
font: bold 52px Helvetica, Arial, Sans-Serif;
text-shadow: 1px 1px #fe4902,
2px 2px #fe4902,
3px 3px #fe4902;
}
.shadow:hover {
position: relative;
top: -3px;
left: -3px;
text-shadow: 1px 1px #fe4902,
2px 2px #fe4902,
3px 3px #fe4902,
4px 4px #fe4902,
5px 5px #fe4902,
6px 6px #fe4902;
}
[/code]

 

Artyk. napisany na podstawie http://css-tricks.com/3d-text-tower/

css3 porady

Poprzedni artykułŁadowanie strony przy jej scrollowaniu w dół (jQuery&php).Następny artykuł Podstawowe zapytania SQL.

Dodaj komentarz Anuluj pisanie odpowiedzi

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Postaw mi kawę na buycoffee.to

Znajdziesz mnie na

TOP

  • 19 najlepszych praktyk w PHP dla początkujących.
  • Pisz SOLIDny kod. Poznaj lepiej SOLID.
  • Nareszcie! Nowe funkcjonalności w PHP 8.
  • OMG! Ubuntu 19.10 „Eoan Ermine” już dostępny!
  • Sprawdzona prognoza pogody online

Tagi

brucelee C# css3 cytaty domena favicon film flash fonts format c generator google google chrome hasła host inspiracja instalacja intro jquery js loading logowanie menu na luzaku obrót opera Outlock 2007 ovh pdf php plugin plyta glowna podręcznik pokaz/ukryj porady pozycjonowanie program programy screen sortowanie sql sumatra pdf Visual Studio 2008 windows xp WordPress

Polecam:

- Jak założyć sklep internetowy?

Better Future

Żyjemy w dynamicznych czasach gdzie informacja jest cenniejsza niż pieniądze. Na moim blogu zdobędziesz cenną wiedzę całkowicie za DARMO. Dlaczego? Sprawdź w moich postach!

Ostatnie wpisy

19 najlepszych praktyk w PHP dla początkujących.25 czerwca 2022
Pisz SOLIDny kod. Poznaj lepiej SOLID.12 września 2021
Nareszcie! Nowe funkcjonalności w PHP 8.30 czerwca 2021

Kontakt

Pisz na: hi@przemyslawsobolewski.com
hi@przemyslawsobolewski.comwww.przemyslawsobolewski.com

Ostatnie wpisy

19 najlepszych praktyk w PHP dla początkujących.25 czerwca 2022
Pisz SOLIDny kod. Poznaj lepiej SOLID.12 września 2021
Nareszcie! Nowe funkcjonalności w PHP 8.30 czerwca 2021

Popularne wpisy

Mnożenie i dodawanie macierzy w C#6 comments
Ciąg Fibonacciego w C#.5 comments
Jak obrócić obraz w pliku .pdf ?4 comments