Pomagam dzieciom!

CSS3 - projekt wyglądu i animacje na stronie internetowej

CSS3 - projekt wyglądu i animacje na stronie internetowej

Tagi: CSS3, programowanie, strony www

iREBU Specjalista WordPress

WordPress / Hosting / Pozycjonowanie / Seo


Po zbudowaniu szkieletu strony internetowej można przygotować projekt graficzny i animacje za pośrednictwem stylów CSS3.

Zacząć należy od ustawienia domyślnych wartości styli, tak aby zapewnić prawidłowe działanie na popularnych przeglądarkach internetowych.

HEADER,FOOTER,p,time{display:block}
HEADER,FOOTER,hgroup{clear:both}
form,input{margin:0}
ul{padding:0;list-style-type:none}
label{display:inline-block}
input{padding:0;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0}
th,td,form,label{vertical-align:top}

article{position:relative}
a{color:#000}
a:link{text-decoration:none}
figure{position:relative;display:inline-block;max-width:100%;margin:0}
a > figure{display:block}
img{display:inline-block;max-width:100%;height:auto;border:none;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}
a img{display:block;cursor:pointer}
video{display:inline-block;max-width:100%;height:auto;border:none;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}
input,textarea,select{outline:none}
input[type=submit]{line-height:normal !important}
iframe{display:block;max-width:100%;border:none}

Elementy CSS3 można powiązać z kodem HTML5 przy pomocy identyfikatora (id) lub klasy (class).

HTML5
<div id="identyfikator" class="klasa"></div>

CSS3
#identyfikator{}
.klasa{}

Popularne atrybuty CSS3:

  • margin: 10px 10px 10px 10px - margines górny, prawy, dolny, lewy,
  • padding: 10px 10px 10px 10px - wewnętrzny odstęp górny, prawy, dolny, lewy,
  • width: 100px - szerokość bloku,
  • height: 100px - wysokość bloku,
  • font: bold 12px/14px arial - rodzaj, wielkość i typ czcionki,
  • color: #000000 - kolor czcionki,
  • background: #000000 url('odnośnik do zdjęcia') 50% 50% no-repeat - kolor i zdjęcie tła,
  • border: 1px solid #000 - ramka dookoła bloku,
  • -moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px - zaokrąglenie ramki,

Wartości elementów CSS3 mogą być opisane w pikselach (px) lub procentach (%).

Aby urozmaicić wygląd strony internetowej warto dodać ikony, ja korzystam z gotowego zestawu fontawesome (fontawesome.io):

<span class="fa fa-html5 fa-2x"></span>

Podstawowe animacje najprościej wykonać przy pomocy biblioteki animate.css (daneden.github.io/animate.css):

<div class="animated slideInLeft"></div>

POLECANE / Nowoczesne strony WWW HTML5 CSS3 Adobe Muse Wordpress


Doświadczenie

Na rynku działam ponad 15 lat, zrealizowałem setki projektów. Przede wszystkim lubię swoją pracę, jest ona moją pasją.

Wiedza i innowacyjność

Nieustannie poszerzam swoją wiedzę i rozwijam umiejętności. W codziennym cyklu pracy nigdy nie może zabraknąć czasu na branżowe szkolenia czy konferencje, czytanie blogów oraz testowanie nowych rozwiązań.

Zaangażowanie

Powierzone mi zadania zawsze wykonuję rzetelnie i solidnie. Żadna aplikacja nie zostanie przeniesiona na docelowy serwer bez przejścia przez szereg testów. Błędy, oczywiście, zawsze mogą wystąpić, nie zaprzeczam im. Moim priorytetem jest szybkie i sprawne ich usunięcie.

Elastyczność

Kontakt możliwy również wieczorami i w weekendy. W awaryjnych sytuacjach, wykonuję ekspresowe zadania, także w trybie weekendowym, z krótkim terminem wykonania.

Referencje

  • logo play
  • logo plk
  • logo pkp-cargo
  • logo uniwersytet-warszawski
  • logo politechnika-poznanska
  • logo uniwersytet-adama-mickiewicza
  • logo termy-maltanskie
  • logo rzeczpospolita
  • logo v33
  • logo ferguson
  • logo unitra
  • logo wyzsza-szkola-urody-i-edukacji
  • logo wyzsza-szkola-handlu-i-uslug