В днешния, на пръв поглед лесен урок, ще разгледаме техника, от която все още доста хора се боят (и с право). Обикновено причината за това са лошите отношения между CSS3 и IE x.x заедно с нестихващата му популярност. Но всички знаем, че с навлизането на CSS3 стана модерно повечето елементи в дизайна да са облички, независимо дали има нужда. В такъв случай как би се вписала ръбата таблица във вашия "гладък" дизайн? Неееее... абсурд, няма да се излагаме я. За това със следващите редове ще разгледаме един от вариантите за заобляне на ъглите й.

В случая аз съм избрал варианта, в който ползваме само CSS и никакъв JS. Той ни предоставя доста добър резултат под всички браузъри, с изключение на IE. Там таблицата ще изглежда съвсем стандартно, но като се има предвид, че вероятно сте ползвали CSS3 и на други елементи в дизайна ви, то това едва ли би било проблем. Универсално решение е използването на JS, като например jQuery Corner плъгина или нещо собственоръчно написано. Естествено не това е целта на урока, напротив - както винаги ние ще се опитаме да направим нещата по най-лесния начин и по-важното - ще вземем поука за какво още би ни била полезна тази техника. Приятно четене!

научи повече...

  • Facebook
  • Twitter

Из нашите страници не веднъж сме казвали, че една от основните движещи сили в работата по даден проект е яснотата на кода. Колкото по-правилен, по-разбираем, по-изчистен и подреден е той, толкова по-добре за всички замесени в проекта. Естествено, на пръв поглед удобството е най-вече за вас, но един добре написан код може да бъде модифициран лесно и от трети лица за в бъдеще, а това от своя страна спестява време и пари.

Оптимизацията не винаги може да бъде на 100%, но с този урок ще се опитам да помогна на "прохождащите" писачи на CSS да изградят навици или просто да си харесат някоя завъртяна техника, с която да оптимизират своя CSS файл. Имайте едно на ум, че всъщност оптимизацията на CSS-а започва още със структурирането на HTML документа!

Ще се опитам да не бъда пристрастен и да сравня плюсовете и минусите на всеки метод, така че да откриете подходящия за вас. Трябва да знаете, че не винаги писането по един и същ начин е най-оптимално и точно поради тази причина е добре да комбинирате техниките за да получите желания резултат. Нека пристъпим към действие!

научи повече...

  • Facebook
  • Twitter

Диаграми с CSS3

Предполагам доста от вас вече са се уверили в могъщите способности на CSS3. Въпреки рехавата поддържка, новият стандарт усилено се налага в ежедневието на разработчиците и съответно потребителите, като за последните в повечето случаи е трудно да усетят някаква разлика. Не това е важното обаче. Ние от FridayCode осъзнаваме колко ценен е CSS3 и как може да удължи живота ви с няколко бири повече. Това е и благородната причина, поради която споделяме този урок с вас.

Любопитната тема, на която сме се спряли днес има вероятност да ви повлече към отворилата се носталгична яма. Защо намесвам спомените ли? Както вече сте разбрали ще говорим за графики, диаграми и пр. Интересното е, че докато правих урока, в главата ми се въртяха добрите стари Excel-ски чартове. През 90-те години те си бяха сериозна гъзария и дори да не им се намираше голямо приложение сред дечурлигата, самият факт че можеш да ги правиш ти вдигаше health-a с 50 единици.

Сега, за жалост, олдскул ръбатите графики са заменени от супер-дупер красиви, мазни и ефектни диаграми, които обикновено са дело на Flash. Ние обаче за момент ще игнорираме тази технология и ще си поговорим за чартовете само с CSS3.

научи повече...

  • Facebook
  • Twitter

Тъй като от доста време не сме писали урок тип "малък и спретнат", а бях обещал периодично да виждате такива на нашите страници, реших да седна и да поправя грешката.

Вероятно сте обърнали внимание на заглавието и се чудите защо е на английски. Ами това е така поради факта, че този термин е изключително труден за превод и поне аз не успях да се сетя за вариант по-къс от няколко изречения. Ето защо реших да оставя заглавието по този начин, който всъщност намирам за достатъчно разбираем. Но тъй като това е статия насочена към вас читателите, с няколко думи ще се опитам да обясня какво е "scalable full body background".

Предполагам сте виждали сайтове с огромни и сложни бекграунди, които изпълват целия ви екран. За жалост, повечето от тях са оптимизирани за определени резолюции, като веднага мога да дам пример с кофти бекграундите на cinefish.bg, когато правят промоция на филм. Нищо против сайта, просто могат да наблегнат малко повече на изображенията, които заемат голяма част от екрана. Все пак има и друг тип сайтове, които разполагат с бекграунди, оптимизирани за всякакви резолюции. Веднага давам още един български пример с kia.bg. Там използват метод, близък до единия от двата, за които смятам да пиша днес. И ако съм ви грабнал вниманието, четете надолу!

научи повече...

  • Facebook
  • Twitter

В наши дни всичко се развива със скорост еквивалентна на тази, с която 5-годишно хлапе разлиства първия си "Плейбой". В това число имам предвид естествено и уеб технологиите. Докато преди няколко месеца или максимум година CSS3 беше мит за повечето от нас, то в наши дни новият стандарт навлиза сериозно в употреба, естествено с леки въздръжки. Всеки професионалист, който пише CSS, би трябвало винаги да е в крак с новостите, за да улеснява това живота му. Точно за това прецених, че за аудиторията ни ще бъде полезно да прочетете нещо за CSS3 на нашите страници. Въпросното "нещо" реших да бъде небезизвестната таб-навигация, защото се среща на доста места и може да намери голямо приложение.

В този урок се опитах да внедря не една, а няколко интересни CSS3 глезотийки, които няма да ви спестят код, но ще елиминират нуждата, както от картинки, така и от javascript за по-обикновените ефекти. Общо взето ще научите как да направите заоблени ъгли, как да сложите сянка на елемент, как да направите градиент и гвоздеят на програмата - как да анимирате. Приятно четене!

научи повече...

  • Facebook
  • Twitter

Content Switcher без JavaScript

Наскоро, докато писах Как да си направим Slider или Carousel с jQuery си припомних как се правеше подобен Content Switcher, преди да почна да се занимавам с JavaScript. В днешно време сайт без JavaScript е почти немислим заради всичката динамика от която се нуждае потребителя. Въпреки всичко обаче все още се срещат сайтове които са чисто информативни и които в самия си front-end нямат и ред JavaScript.

И защо един такъв сайт да няма приличен Content Switcher?

Content Switcher без JavaScript

И така, нека започнем!
Както обикновено първо да напишем малко HTML. За този пример съм използвал XHTML 1.0 Strict, но вие може да използвате Transitional.

научи повече...

  • Facebook
  • Twitter

Разглеждал съм доста уроци из мрежата за това как да си направим така наречения "лепкав" футър. Много от тях обаче или имаха доста излишен код или бяха куци, като изпълнение или изобщо не сработваха на някои места.

Всъщност подобно упражнение ми се наложи да правя за първи път преди няколко години, когато никой не подозираше, че е възможно да се получи само с CSS. Честно казано единствените работещи варианти бяха свързани с изписаването на една купчина javascript код. Разбира се в момента, благодарение на js библиотеки може да се направи изключително лесно, но я си представете, че на сайта ви няма грам javascript и някак не върви да зареждате цяла библиотека, за да постигнете резултата. Точно за това в този урок ще разгледаме варианта, в който може да създадете Sticky Footer само с CSS.

научи повече...

  • Facebook
  • Twitter

Преди да преминем към същината на статията искам с няколко реда да припомня начините за добавяне на CSS. Имаме три варианта - външен файл (external), вътрешен (internal), който седи между <head> таговете и инлайн, който се пише директно на реда на конкретния елемент (inline). Съответно всеки тип си има свой приоритет, като най-приоритетен е инлайн стила, следва го вътрешния и накрая CSS-а зареден от външен файл. Доста хора от вас знаят, че напишете ли нещо инлайн, то няма промяна от друго място, но това не е точно така. В тази статия ще поговорим за това как можем да променяме инлайн стиловете забити в HTML-a.

Налагало ли  ви се е да напишете инлайн код, който след това ви се иска на определено място да не се изпълнява? Разбира се, ако сте програмист ще кажете "Какво толкова? Това е един if и един else, но за обикновен front-end developer, пречупено през неговия поглед, това е нещо много сложно. Не се притеснявайте обаче, защото има решение на проблема. За добро или зло то не работи под Internet Explorer 6, но за сметка на това под всички останали браузъри е безпроблемно.

В следващите редове съм опитaл да дам, както решението на проблема така и прост пример за използването му.

научи повече...

  • Facebook
  • Twitter

Дали за удобство, дали за красота или просто, защото някой иска да покаже какво може, използването на табовете е доста разпространено напоследък. В този урок ще се опитам да ви покажа един от най-лесните начини за направата на такива табове с няколко реда xHTML, CSS и малко JavaScript. Надявам се техниката да е полезна не само за начинаещи, но и за напреднали.

научи повече...

  • Facebook
  • Twitter

Целта на днешното занятие е да създадем едно семпло, но много еластично от към функционалност меню. Под семпло имам предвид само външния вид, като естествено вие може да си го промените както пожелаете. За сметка на това обаче менюто ще поддъжа безброй подменюта, което е и големият плюс, а самото добавяне на ново подменю става с копирането на няколко реда код. И за финал, за да е по-мазничко съм добавил малко jquery ефектчета.

Менюто е тествано и работи на всички по-популярни браузъри - Firefox 3.6, Chrome 4, Opera 10, Safari 4, IE 6, IE 7 и IE 8. Освен това може да се ползва за всичко - не е задължително да е главно меню. С малко пипане може да стане хоризонтална навигация, а ако го обърнете на 180 градуса може да се получи помощна лента, забита в дъното на екрана в стил Facebook. Изобщо възможностите са доста и се постарах да покрия колкото се може повече. Ако искате да ровичкате обаче, да предупредя, че трябва да имате поне минимални познания по CSS, HTML и JS, тъй като има някои тънкости. Разбира се винаги може и да попитате, ще се постарая да отговоря. Освен това, ако на някой не му харесва нещо или се сеща за по-културно решение - приемам всякакви идеи и корекции!

научи повече...

  • Facebook
  • Twitter
  • Страница 1 от 2
  • 1
  • 2
  • >