Coding and programming mobile applications for devices. Design and programming. Responsive web design and optimization

CSS3 - Webseitendesign und Animationen

Tagi: CSS3, Webseiten

iREBU Agencja Interaktywa / Studio graficzne

Specjalista Wordpress / Programowanie / Projekty graficzne / Wydruk


Having created a website framework, it is possible to prepare a graphic design and animations with the use of CSS3 styles.

First, the default style values need to be set in order to ensure proper functioning on popular web browsers.

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}

CSS3-Elemente können mit dem HTML5-Code mit Hilfe des Identifikators (ID) oder Klasse (class) verknüpft werden.

HTML5
<div id="identifier" class="class"></div>

CSS3
#identifier{}
.class{}

Populäre CSS3-Attribute:

  • margin: 10px 10px 10px 10px - top, right, bottom, left margin,
  • padding: 10px 10px 10px 10px - top, right, bottom, left padding,
  • width: 100px - block width,
  • height: 100px - block height,
  • font: bold 12px/14px arial - font family, size and type,
  • color: #000000 - font color,
  • background: #000000 url('link to a picture') 50% 50% no-repeat - background color and picture,
  • border: 1px solid #000 - border around a block,
  • -moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px - rounded corners,

Die Werte von CSS3-Elementen können in Pixel (px) oder Prozent (%) beschrieben werden.

Um das Aussehen der Internetseite zu variieren, sollte man Icons hinzuzufügen. Ich verwende das fertige Fontawesome-Set (fontawesome.io):

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

Der einfachste Weg, um Grundanimationen zu erstellen, ist die animate.css Bibliothek zu verwenden (daneden.github.io/animate.css):

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


Klienci

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