Dzięki uprzejmości Wydawnictwa Helion mam możliwość zrecenzowania ksiażki CSS3 Kaskadowe arkusze stylów. Ćwiczenia praktyczne, której autorem jest Witold Wrotek. Książka została wydana w roku 2013.

PHP – MySQL dla każdego

Uprzedzając – czy jest to artykuł sponsorowany? W jakiś sposób tak – książka zostanie u mnie. Czy moje opinie są sponsorowane? Zdecydowanie nie.

Treść

Na początku chciałbym wymienić plusy ksiażki (która posiada niecałe 180 stron):

• brak

Teraz czas na minusy.

Ja rozumiem, że tytuł ma przyciągnąć uwagę, ale kiedy w tytule mamy CSS3 (zwracam uwagę na wersję!), a na temat możliwości CSS w wersji trzeciej mamy może kilkanaście stron (cienie, trochę animacji, zaokrąglone rogi, column-count) to coś tutaj jest nie tak.

Ksiażka jest rozciągnięta na siłę – a pamiętajcie, że mówimy o 180 stronnicowej pozycji. Dla przykładu – nie rozumiem, po co w książce na temat CSS (tę „3″ pomińmy już milczenien) znajdują się screenshoty tego, jak załadować plik z dysku. Wydaje mi się, że osoba która sięga po taką ksiażkę raczej wie jak tego dokonać.

Większość przykładów w książce wygląda tak:

1. Otwórz Notatnik
2. Wpisz w nim kod:
3. [kawałek kodu] (i za każdym razem „prawie-pełny”, tzn. są znaczniki html, head, body, nie ma za to title czy doctype’a)
4. Rysunek pokazujący wynik działania kodu (to akurat słusznie).

Dodatkowo, mimo tego, że autor na samym początku ksiażki wspomina o różnych sposobach dołączania styli (link, style, czy też inline), to dalej przez całą ksiażkę ciągną się przykłady ze stylami w ramach znacznika style czy też inline. Dlaczego nie uczyć dobrych praktyk od samego początku?

I tak, nie ujrzycie w tej książce ćwiczeń pt. „stwórz layout, gdzie mamy menu po lewej o szerokości 30%, a resztę zajmuje treść strony”, za to znajdziecie ćwiczenie na temat „tęczowego obramowania”.

Czytaj dalej tutaj (rozwija treść wpisu)
Czytaj dalej na blogu autora...

Zwiń
Czytaj na blogu autora...

W dzisiejszym wpisie przyjrzę się ponownie tematowi Media Queries, poruszanemu już na tym blogu. Wtedy jednak zająłem się omówieniem Media Queries dla CSS3, a tym razem poruszę bardziej futurystyczny temat, jakim jest CSS4. Co z tego wynika? Dzisiejszy wpis będzie luźniejszy i raczej mało przydatny w najbliższym czasie, doskonale jednak pokazuje w jakim kierunku zmierza [...]

Thomas Stachl (@thomasstachl) jest twórcą ciekawej biblioteki o nazwie Slidr.css. Pozwala ona urozmaicić wygląd checkbox-ów na naszej stronie poprzez wyświetlanie ich w formie mini-sliderów. Co jeszcze bardziej ciekawsze, autor rozwiązania nie używa w tym celu ani grama Javascript-u!

Żeby jednak ostudzić entuzjazm, należy dodać, że autor odradza na chwilę obecną używać Slidr-a na stronach produkcyjnych, ponieważ jest on dopiero w fazie eksperymentalnej. Niemniej jednak projekt wydaje się ciekawy.

Więcej szczegółów oraz kod źródłowy można znaleźć na Githubie autora pod adresem http://tstachl.github.com/slidr.css/

Czasami musimy opublikować na stronie WWW adres e-mail w jawnej postaci, jako tekst. Jak to zrobić, by nie dać się złapać w sidła spamerskich robotów? Rozwiązań jest dużo, poczynając od szyfrowania przy pomocy JavaScriptu, przez odwracanie tekstu z CSS, kończąc na zamienianiu znaków na ich encjowe odpowiedniki w HTML. Pomysłów i sztuczek jest oczywiście więcej, [...]

Tooltip to element interfejsu używany zazwyczaj do dodatkowego opisu danego elementu (np. linku). W podstawowych wersjach HTML-a zastosowano tooltip za pomocą atrybutu title. Jest on stosowany do wszystkich znaczników, za wyjątkiem: , , , , , , i . Jak zwiększyć jego efekt, poprzez dodanie kolorystyki i animacji? Dla zaprezentowania

Bardzo często się zdarza, że grafik zaprojektuje grafikę strony tak, że na niektóre elementy nie mamy zbyt wiele miejsca, a dodatkowo powinny się mieścić w jednej linii. Wszystko fajnie jeżeli chodzi o projekt graficzny, jednak problem pojawia się w przypadku dynamicznej zawartości. Nie jesteśmy bowiem w stanie przewidzieć jak długi tekst wprowadzi użytkownik. Można co [...]

pobierz w .pdf(przeznaczone do wydruku)

Kodując szablon zapewne wiele osób ma problem ze stopką „wiszącą” tuż pod treścią, gdy jest jej za mało, by stopka obsunęła się na dół. Jak ją „przykleić” do dolnej krawędzi niezależnie od ilości treści? Jest na to kilka sposobów…

Metoda Ryana Falta

CSS:

* { 
    margin: 0; 
} 
html, body { 
    height: 100%; 
} 
.wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -100px; // taki jak wysokosc stopki
} 
.footer, .push { 
    height: 100px; // taki jak wysokosc stopki
}
.push{
    clear: both;
}

HTML:

<body> 
    <div class="wrapper"> 
        <p>Treść strony www</p> 
        <div class="push"></div> 
    </div> 
    <div class="footer"> 
        <p>Stopka</p> 
    </div> 
</body>

W metodzie tej musimy ustawić dolny margines dla klasy .wrapper o ujemnej wartości wysokości stopki. Ponadto sposób Ryana Falta wymaga dodania pustego kontenera .push o takiej samej wysokości jak stopka. Wadą tego rozwiązania jest zakaz używania górnych i dolnych marginesów – powodują one błędne określenie wysokości strony.

Metoda Steva Hatchera

CSS:

* {
    margin:0;padding:0;
}  
html, body {
    height: 100%;
} 
#wrap {
    min-height: 100%;
} 
#main {
    overflow:auto; 
    padding-bottom: 180px; // taki jak wysokosc stopki
}
#footer {
    position: relative; 
    margin-top: -180px; // taki jak wysokosc stopki
    height: 180px; 
    clear:both;
}
/*Opera Fix*/ 
body:before {/* thanks to Maleika (Kohoutec)*/ 
    content:""; 
    height:100%; 
    float:left; 
    width:0; 
    margin-top:-32767px;/* thank you Erik J - negate effect of float*/ 
}

HTML:

<div id="wrap"> 
    <div id="main"> 
        Treść 
    </div> 
</div> 
<div id="footer"> 
    Stopka 
</div>

Sposób ten jest podobny do metody Ryana Falta. Tutaj także górne i dolne marginesy powodują błędy. Zaletą tego rozwiązania jest to, że nie musimy tworzyć pustych kontenerów.

Poza powyższymi metodami często stosuję min-height dla głównego kontenera z treścią. Może nie jest to zbyt idealne rozwiązanie, ale w większości przypadków wystarczające

Czytaj dalej tutaj (rozwija treść wpisu)
Czytaj dalej na blogu autora...

Zwiń
Czytaj na blogu autora...