Pic
shadow

Rajzoljunk css-el

Beküldte Admin a(z) Programozás kategóriában
Ahogyan azt már egy előző cikkben (Webdesign trendek 2014-ben) említettem, a jelenlegi igények alapján egyre kevesebb képet fogunk használni a webdesign során. Egyre inkább a flat stílus irányába haladunk, ez pedig fokozza a különböző geometriai elemek jelentőségét.

A css-sel az egyszerűbb (sőt, néha még a bonyolultabb) ábrákat meg tudjuk rajzolni, ahelyett, hogy képet használnánk. Így jelentősen javul az oldalunk betöltési sebessége is.

Az alábbiakban szeretnék bemutatni néhány különlegesebb elemet, ami megrajzolható css3-mal. Az alapokat (négyzet, téglalap stb.) most nem ismertetném, hiszen aki ezzel foglalkozik, az nyilván tisztában van a lehetőségekkel.

1. Végtelen


Elég gyakori szimbólum, régebben nem gondoltam volna, hogy ez lehetséges ilyen módon is.. :)

2. Pac-man


Szerintem nincs olyan, akinek be kellene mutatnunk Pac -Man-t. Sok ember kedvenc játéka volt régebben, én is szerettem vele játszani, ezért tettem a listámba.

3. Gyémánt forma
< br/>
Egyszerű gyémánt forma. Ez nem bonyolult, viszont nem egyértelmű az elkészítése css segítségével.

4. Yin-Yang


Szándékosan hagytam a végére ezt, hiszen ez a leginkább összetett és megdöbbentő. Ez a példa elég bizonyíték arra, hogy szinte bármi megoldható css segítségével, ami geometriai alakzatokkal leírható.

Ezen a linken letölthető egy példa html és css fájl, amiben látszanak a kódok is.

LINK

Jó kísérletezést kívánok! :) Ha van Neked is olyan „rajz”, amit szívesen megosztanál másokkal, küldd el nekem és felteszem az oldalamra. Természetesen nem a saját nevem alatt, hanem a Te neveddel.
03Ápr2014