Proud to be an engineer !: css

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

niedziela, 26 października 2014

[HTML|JS|CSS] CSS3: Flexbox

Layout w HTML + CSS zawsze był problemem. W ostatnim czasie coraz więcej przeglądarek wspiera nowe rozwiązanie dotyczące layoutów - flexboxy. Problem jest prosty: mamy kontener i chcemy w nim rozmieścić elementy.

<div id="flexbox1">
 <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

Korzystając z propercji display ustawionej na flex oraz ustawiając na kontenerze flex-direction na jedną z możliwych opcji, możemy uzyskać następujące efekty:

.flexbox {
    display: flex;
    flex-direction:row;
    border: 1px solid black;
    margin-top: 10px;
    min-height: 15px;
    width: 200px;    
}

Domyślnie kontener ustawi nam się na 100% szerokości. Modyfikować możemy też style w elementach kontenera. Mamy do dyspozycji propercje order oraz flex-grow.

Jeśli chodzi o sam kontener, to pozostałymi ciekawymi opcjami są flex-wrap oraz justify-content.

sobota, 9 listopada 2013

[HTML|JS|CSS] jQuery: Lightbox

Lightbox to popularna na stronach internetowych technika wyświetlania obrazów z wyszarzonym tłem, znana na przykład z allegro. W tym poście przedstawione zostanie, jak zaimplementować taką funkcjonalność z użyciem jQuery.

Odnośniki do obrazków będą zwykłymi tagami typu <a>. Po kliknięciu w odnośnik zostaną dodane dwie warstwy: zewnętrzna (overlay) i ta, na której wyświetlany jest obrazek (lightbox).

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>Lightbox</title> 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script src="scripts/myscript.js"></script>
</head>
<body>
 <h2>Nice cars list</h2>
 <ul>
  <li>
   <a href='/images/bmw_seria6.jpg' class='lightbox'>BMW Seria 6</a>
   <a href='/images/hyundai_genesis.jpg' class='lightbox'>Hyundai Genesis</a>
   <a href='/images/lexus_ct200h.jpg' class='lightbox'>Lexus Ct200h</a>
   <a href='/images/mercedes_slk.jpg' class='lightbox'>Mercedes SLK</a>
   <a href='/images/nissan_350z.jpg' class='lightbox'>Nissan 350z</a>
  </li>
 </ul>
</body>
 <style>
  #lightbox_overlay {
   position:absolute;
   top:0;
   left:0;
   height:100%;
   width:100%;
   background:black url(spinner.gif) no-repeat scroll center center;
  }
  #lightbox {
   position:absolute;
  }
 </style>
</html>

Overlay pozycjonowany jest absolutnie z wymiarami na 100%. Pozycję lightboxa wylicza się tak, aby trafił na środek ekranu. Animacja opacity daje efekt półprzezroczystej warstwy.

$(document).ready(function(){
 $('a.lightbox').click(function(e) {
  $('body').css('overflow-y', 'hidden');
  $('<div id="lightbox_overlay"></div>').css('top', $(document).scrollTop())
  .css('opacity', '0')
  .animate({'opacity': '0.5'}, 'slow')
  .appendTo('body');
 $('<div id="lightbox"></div>')
  .hide()
  .appendTo('body');
 $('<img />')
  .attr('src', $(this).attr('href'))
  .load(function() {
   positionLightboxImage();
  })
  .click(function() {
   removeLightbox();
  })
  .appendTo('#lightbox');
  return false;
 });
 });

function positionLightboxImage() {
 var top = ($(window).height() - $('#lightbox').height()) / 2;
 var left = ($(window).width() - $('#lightbox').width()) / 2;
 $('#lightbox')
  .css({
   'top': top + $(document).scrollTop(),
   'left': left
  })
 .fadeIn();
}

function removeLightbox() {
 console.log('asd');
 $('#lightbox_overlay, #lightbox')
  .fadeOut('slow', function() {
   $(this).remove();
   $('body').css('overflow-y', 'auto');
  });
}

niedziela, 18 sierpnia 2013

[HTML|JS|CSS] CSS3: calc

Calc to funkcja, która umożliwia przeliczanie różnych jednostek długości w stylach CSS. Wsparcie dla calc dostarcza coraz więcej przeglądarek, niektóre wymagają jeszcze użycia tzw. vendor prefixes.

Przykład użycia calc w Sassie:

@mixin calc($property, $expression) { 
  #{$property}: -moz-calc(#{$expression}); 
  #{$property}: -o-calc(#{$expression}); 
  #{$property}: -webkit-calc(#{$expression}); 
  #{$property}: calc(#{$expression}); 
} 

.outer{
 width: 100%;
 background-color: red;
 height: 100px;
}

.inner{
 @include calc("width","100% - 200px");
 background-color: blue;
 height: 100px;
}

Szerokość wewnętrznego diva będzie przeliczana przy każdej zmianie rozmiaru okna.

.outer {
  width: 100%;
  background-color: red;
  height: 100px; }

.inner {
  width: -moz-calc(100% - 200px);
  width: -o-calc(100% - 200px);
  width: -webkit-calc(100% - 200px);
  width: calc(100% - 200px);
  background-color: blue;
  height: 100px; }

Pozostaje pytanie, co w przypadku, gdy przeglądarka nie obsługuje calc. Do tego, by wykryć, czy przeglądarka wspiera calc wystarczy znana biblioteka Modernizr od wersji 2.6. Samo przeliczenie wystarczy wykonać w JS np. odejmując od szerokości parenta zadaną powyżej szerokość 200px. .

sobota, 8 września 2012

[HTML|JS|CSS] Compass : Wprowadzenie

Compass to framework bardzo przydatny przy tworzeniu CSSów. Wykorzystuje Sass, będący rozszerzeniem CSS 3, dodając do niego sporo możliwości. Mamy więc dostęp do sporej ilości gotowych mixinów, czy reużywalnych wzorców pomocnych przy projektowaniu stron.

Aby móc skorzystać z compass'a należy zainstalować ruby oraz ruby gems. Oto przydatne linki:

1. Ruby
2. Ruby Gems

Następnie możemy skorzystać z ruby gems i zainstalować Compass następującą komendą z linii poleceń:

gem install compass

Po zainstalowaniu możemy stworzyć nowy projekt z compassem, poleceniem:

compass create mydirectory

W folderze utworzone zostaną subfoldery sass (pliki .scss) i stylesheets (wyniki transformacji).
Możemy też wpiąć compass do istniejącego już projektu poleceniem:

compass install compass

W wierszu poleceń otrzymujemy gotowy kod html z linkami do arkuszy styli.

To import your new stylesheets add the following lines of HTML (or equivalent) t
o your webpage:
<head>
  <link href="/stylesheets/screen.css" media="screen, projection" rel="styleshee
t" type="text/css" />
  <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/
css" />
  <!--[if IE]>
      <link href="/stylesheets/ie.css" media="screen, projection" rel="styleshee
t" type="text/css" />
  <![endif]-->
</head>

Aby Compass rozpoczął śledzenie zmian w plikach .scss i transformowanie ich w pliki .css przy każdym zapisie, wystarczy wpisać:

compass watch mydirectory

gdzie mydirectory zawiera foldery sass i stylesheets.

Aby korzystać z możliwości Compassa, należy go zaimportować w pliku .scss dyrektywą:

@import "compass";

piątek, 7 września 2012

[HTML|JS|CSS] Sass : Nth function

Obok list, możemy definiować kolekcje dowolnych elementów, przypominające krotki. Budowanie selektorów w ten sposób, to kolejna okazja do zmniejszenia ilości kodu, jaki musi napisać programista. Funkcja nth wyciąga n-ty element z kolekcji.

Przykładowy sposób użycia funkcji nth

@each $item in (
 myclass1 red 100,
 myclass2 black 200,
 myclass3 blue 300
 )
{
 .#{nth($item,1)}
 {
  background: nth($item,2);
  min-width: nth($item,3);
 }
}

Należy pamiętać o tym, że przecinkiem oddziela się tylko elementy w kolekcji, a do oddzielenia ich właściwości służy spacja,

Po transformacji:

.myclass1 {
  background: red;
  min-width: 100; }

.myclass2 {
  background: black;
  min-width: 200; }

.myclass3 {
  background: blue;
  min-width: 300; }

[HTML|JS|CSS] Sass : Listy

Sass umożliwia iterowanie po definiowanych przez nas kolekcjach. Możemy stworzyć listę napisów jako pewną zmienną, a następnie odwołać się do każdego z tych napisów. Znacznie ułatwia to pracę w momencie gdzie tworzymy kilka podobnych selektorów, a każdy z tych selektorów wykorzystuje jakiś napis w wielu miejscach. Kolekcję tworzymy podobnie jak zmienną, przy czym wartości podaje się w nawiasach oddzielone przecinkami. Do iterowania po takiej kolekcji wykorzystujemy polecenie @each. Polecenie to przypomina instrukcję foreach z języka C#. Odwołanie do elementu kolekcji następuje poprzez podanie #{item}.

Przykładowo, gdy chcemy stworzyć klasy, które zarówno w nazwie, jak i ścieżce do background-image ten sam ciąg znaków, możemy użyć list.

$icons:(icon1,icon2,icon3);
@each $icon in $icons
{
 .#{$icon}superclass 
 { 
  background-image: url('/images/#{$icon}.png')
 };
}

Po transformacji:

.icon1superclass {
  background-image: url("/images/icon1.png"); }

.icon2superclass {
  background-image: url("/images/icon2.png"); }

.icon3superclass {
  background-image: url("/images/icon3.png"); }

[HTML|JS|CSS] Sass : Importowanie styli

Bardzo dobrą praktyką przy pisaniu CSSów jest rozbicie selektorów na wiele plików tak, aby w przyszłości móc szybko dokonać potrzebnych zmian. Sass umożliwia importowanie styli zdefiniowanych w wielu plikach .scss a następnie transformację w jeden plik css. Odpowiada za to instrukcja @import. Pliki, które chcemy importować, powinny przez konwencję zaczynać się od podkreślenia, np. _external.scss. W momencie importu do pliku wyjściowego zostaną przekopiowane wszystkie selektory. Dodatkowo mamy dostęp do mixinów i zmiennych zdefiniowanych w zewnętrznych plikach.

Przykładowo, następujący plik o nazwie _external.scss

.external-style{
 border-radius : 3px;
}

@mixin external-mixin{
 font-size: 13px;
}

$myvar : 10px;

#element{
 margin-left: $myvar;
}

możemy wykorzystać w innym pliku w następujący sposób:

@import 'external';

.imported{
 @include external-mixin;
 padding-top: $myvar;
}

Po transformacji otrzymamy:

.external-style {
  border-radius: 3px; }

#element {
  margin-left: 10px; }

.imported {
  font-size: 13px;
  padding-top: 10px; }

czwartek, 6 września 2012

[HTML|JS|CSS] Sass : Dziedziczenie selektorów

Podczas stylowania kontrolek w CSS, często dodajemy nowe style tylko po to, aby rozszerzyć istniejący styl o jakąś cechę. Twórcy Sass wprowadzili mechanizm dziedziczenia styli, dzięki któremu pisanie hierarchii styli staje się przyjemne i znacznie zmniejsza ilość kodu. Aby dziedziczyć z jednego selektora, w drugim, wystarczy dodać instrukcję @extends i podać nazwę stylu. W przypadku definiowania dwóch tych samych właściwości istnieje zasada podobna jak w przypadku mixinów : zastosowana zostanie ostatnia zdefiniowana wartość.

Czytelny kod Sass:

.btn-base
{
 padding: 10px 10px 10px 10px;
 &:hover{
  background-color : #FFFFFF;
 };
}

.yellow-btn
{
 @extend .btn-base;
 padding-top: 20px;
 background-color : #FFFF00;
}

...zostanie przetłumaczona do CSS w następujący sposób:

.btn-base, .yellow-btn {
  padding: 10px 10px 10px 10px; }
  .btn-base:hover, .yellow-btn:hover {
    background-color: #FFFFFF; }

.yellow-btn {
  padding-top: 20px;
  background-color: #FFFF00; }

Zwiększenie czytelności i utrzymymwalności kodu nie podlega wątpliwości.

[HTML|JS|CSS] Sass : Mixiny

Mixiny są czymś, co pozwala znacznie zredukować ilość kodu w pliku .scss. Są to bloki kodu, które możemy wstawiać do selektorów za pomocą instrukcji @include. Każdy mixin może zależeć od parametrów, które podawane są w nawiasie. Podczas deklaracji możemy sobie ustalić domyślną wartość paramtru. Wtedy nie musimy za każdym razem podawać tej samej wartości. Zawartość mixina w momencie tłumaczenia instruckji @include zostanie wstawiona w jej miejscu, nie naruszając pozostałych wartości w selektorze. Należy pamiętać, że jeżeli mixin definiuje właściwość zdefiniowaną również w selektorze poza mixinem, to zostanie zastosowana ostatnia wartość.

Przykład:

@mixin red-bordered($wdth : 5px)
{
 border-width : $wdth;
 border-color : red;
}

@mixin margined-slightly
{
 margin: 2px, 2px, 2px, 2px;
}

.bordered-button
{
 @include red-bordered;
 @include margined-slightly;
}

.bordered-div
{
 font-size: 15px;
 @include red-bordered(10px);
}

Po transformacji:

.bordered-button {
  border-width: 5px;
  border-color: red;
  margin: 2px, 2px, 2px, 2px; }

.bordered-div {
  font-size: 15px;
  border-width: 10px;
  border-color: red; }

środa, 5 września 2012

[HTML|JS|CSS] Sass : Wprowadzenie

Sass (Syntactically Awesome StyleSheets) jest rozszerzeniem CSS 3 umożliwiającym tworzenie arkuszy styli w sposób przyjemniejszy dla programisty i łatwiejszy do zarządzania.

Pliki Sass mają rozszerzenie .scss (Sassy CSS) i są transformowane do plików .css za pomocą narzędzi uruchamianych z command line. Jako, że Sass rozszerza CSS 3, to w plikach .scss możliwe jest zapisywanie każdej konstrukcji składniowej zwykłego CSS 3.

Strona główna Sass

Instalacja:

Aby uruchomić Sass pod windows musimy zainstalować ruby gems, a także ruby. Pomocne linki:

1. Ruby
2. Ruby Gems

Następnie w Command Line wpisujemy:

gem install sass

Teraz możemy utworzyć dwa pliki w folderze z projektem : style.css oraz style.scss.

Aby uruchomić tryb śledzenia zmian, należy wpisać w command line :

sass --watch style.scss:style.css

Każde zapisanie pliku style.scss spowoduje transformację jego treści do style.css. Jeżeli nie popełniliśmy błędu składniowego, otrzymamy na konsoli komunikat:

 Change detected to: E:/Projects/$HTML-JS-CSS/Sass/style.scss

Gdy popełniony zostanie z naszej strony jakiś błąd, informację o nim dostaniemy na konsoli, a także w pliku wyjściowym css, przykładowo:

Syntax error: Invalid CSS after "...ound-color: red": expected ";", was ""
        on line 3 of style.scss