PHP Majster: HTML5

Pokazywanie postów oznaczonych etykietą HTML5_CSS3. Pokaż wszystkie posty

środa, 10 czerwca 2015

[HTML5] Podstawy pracy z Canvas

TRUE

5067432574550638982

Element Canvas pojawił się dopiero w HTML5. Służy on do rysowania grafiki w oknie przeglądarki bezpośrednio za pomocą Javascriptu. Sam z siebie jest w HTML5 jedynie pustym polem, w którym następnie za pomocą odpowiednich metod w Javascripcie rysować możemy dynamicznie dane elementy. Możliwości elementu Canvas jeśli chodzi o rysowane obiekty są praktycznie nieograniczone i zależą jedynie od programisty. Podobnie jak w przypadku biblioteki GD w języku PHP mamy tutaj zestaw kilku predefiniowanych metod slużących do generowania podstawowych kształtów, co za tym idzie - tworząc ich kombinacje jesteśmy w stanie wygenerować właściwie dowolny obiekt.

W artykule tym przyjrzymy się podstawom generowania takiej grafiki za pomocą Canvas i javascriptowych metod. Narysujemy sobie kilka podstawowych kształtów i omówimy jak to wszystko mniej więcej działa.

czytaj dalej

niedziela, 31 maja 2015

[CSS3] Zaokrąglanie narożników

TRUE

124958770973507776

CSS3 pozwala na tworzenie zaokrąglonych elementów. To co kiedyś trzeba było robić za pomocą specjalnie przyciętych obrazków, teraz można zrobić za pomocą stylu CSS. Wszystkie przeglądarki obsługują tą własność poprawnie, więc w tym przypadku nie trzeba posiłkować się prefixami przeglądarek, co zawsze wydłuża definicję styli. W tym krótkim wpisie nauczymy się robić zaokrąglone obramowania dla elementów. Zaokrąglone krawędzie można zaaplikować praktycznie do każdego blokowego elementu HTML. Własność CSS jaka będzie nas interesować w celu zaokrąglenia narożnika elementu to:
[code]border-radius: wartość [px];[/code]
Możemy zaokrąglić wszystkie 4 narożniki, lub tylko któryś z nich, bądż też każdy z nich za pomocą innej wartości. Na początek określmy jedną wartość dla wszystkich rogów. Popatrzmy na przykłady z różnymi kombinacjami. Im więcej pikseli podamy w zaokrągleniu, tym bardziej owalny będzie narożnik. Wszystkie poniższe zaokrąglenia generowane są za pomocą CSS.

border-radius: 25px	border-radius: 5px
div { border-radius: 25px; background: #8AC007; color: #fff; padding: 20px; width: 300px; height: 250px; }	div { border-radius: 5px; background: none; border: 5px solid #8AC007; color: #000; padding: 20px; width: 300px; height: 250px; }
border-radius: 50px	border-radius: 30px
div { border-radius: 50px; background-image:url('monica.jpg'); background-repeat: no-repeat; background-position: left top; border:1px solid #000; padding: 20px; width: 300px; height: 250px; }	div { border-radius: 30px; background-image:url('angelina.jpg'); background-repeat: no-repeat; background-position: left top; border: 5px dotted #8AC007; padding: 20px; width: 300px; height: 250px; }