Георги Калайджиев

Първи стъпки в CSS3 или как да създадем анимирани табове!

от Георги Калайджиев в CSS на 20.05.2010 с 6 коментара и 5,704 прегледа

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

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

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

Тагове: border-radius, box-shadow, css3 animation, css3 gradient, css3 tabs, css3 transitions, css3 уроци, rgba

По-удобна навигация с jQuery

от Георги Калайджиев в Javascript на 29.04.2010 с 2 коментара и 1,955 прегледа

Ако не съм ви го казвал досега - обичам простичките неща. Защо? Защото, колкото по-просто е направено дадено нещо, то вероятността да се развали/счупи/спре да работи е по-малка. Другата причина е, че обикновено сложните неща са съставени от прости, т.е. за да схванете логиката трябва да се почне от А и Б. Днешният урок е типичен пример за това как с един наглед простичък метод, може да се постигне доста приятен краен резултат.

Както всички добре знаем, без HTML нищо от това, което четете в момена няма да бъде реалност. Всичко от най-семплия до най-препълнения с модерни технологии сайт е зависимо от HTML. "Бащата" на езика, британският физик Тим Бърнърс-Лий, днес е директор на консорциума W3C. По времето, когато е работил в ЦЕРН той е получил задача да улесни работата на своите колеги, като измисли по-лесен начин за достъп и обработка на информацията от провеждащите се научни изследвания. Един вид трябвало им страхотна документация, за да извличат максимума от работата си. Така се ражда и HTML, който първоначално имал доста ограничени възможности, но заради лесната употреба и възможността да бъде четен от множество потребители той свършил прекрасна работа.

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

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

Тагове: jquery, jquery navigation, jquery навигация

Пълна :hover поддръжка в Internet Explorer 6

от Георги Калайджиев в Javascript на 22.04.2010 с 1 коментар и 1,243 прегледа

В залеза на своето съществуване, Internet Explorer 6 (IE6) все още държи позиции и гордо върви редом до едни от най-популярните браузъри в момента. Краят му не е дошъл още и вероятно това ще стане с излизането на IE9 и следващия Windows. Дотогава обаче, колкото и да го мразим, трябва малко или много да се съобразяваме с него. Това ще бъде един от малкото уроци, посветени изцяло на проблем под IE6, така че може би хората, които зависят от този браузър ще наострят уши.

Всички знаете, че IE6 поддържа псевдо-класа :hover само на <a> елемент, което в доста от случаите е проблем, защото орязва не само визията, но понякога и ползваемостта. Точно за това нашата задача е да намерим най-простото решение.

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

Тагове: IE6 hover проблем, Javascript, jquery, jQuery hover, Suckerfish :hover, Whatever:hover

Разлики между b, i и strong, em

от Георги Калайджиев в HTML на 07.04.2010 с 3 коментара и 1,467 прегледа

От няколко дни насам, екипът ни доста бурно обсъждаше темата, за която ще пиша днес. Дилемата беше дали материалът си заслужава толкова вниманието или по-скоро трябва да бъде вписан в някой по-обобщен урок. В крайна сметка преценихме, че има какво да се каже и ще е добре да го направим, защото информацията е наистина ценна, а все още доста хора не разбират напълно разликите между тези HTML елементи. Ето че на мен се падна задачата да обясня нагледно как стоят нещата, като реших да добавя и малко подправки или иначе казано ще поговоря за тези елементи и трансформациите, които ще претърпят с навлизането на HTML5.

Предполагам доста от вас ползват поне един от таговете , ,  и , но е напълно възможно никога да не са се замисляли каква точно е разликата между тях. На пръв поглед, визуално тя е нулева - и правят текста bold (удебелен), а и го правят italic (курсивен). Всъщност между тях има огромна разлика и точно за нея ще си поговорим в следващите редове.

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

Тагове: em, semantic html, strong, семантичен код

Лепкав "Sticky" Footer само с CSS

от Георги Калайджиев в CSS на 31.03.2010 с 11 коментара и 2,561 прегледа

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

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

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

Тагове: CSS, sticky footer, sticky footer само с css, лепкав футър

Simple Drop Down Menu w/ CSS & jQuery

от Георги Калайджиев в CSS, Javascript на 18.03.2010 с 20 коментара и 5,452 прегледа

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

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

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

Тагове: CSS, HTML, jquery, Simple CSS Menu, Simple jQuery Menu

Хоризонтално и вертикално центриране на елемент с CSS

от Георги Калайджиев в CSS, HTML на 18.03.2010 с 6 коментара и 1,921 прегледа

В този урок ще ви покажа как да центрирате един HTML елемент не само по хоризонтала, но и по вертикала. Ако тръгнете да се ровите из нета ще намерите много решения, които имат редица плюсове и минуси, но тук ще стане въпрос за най-лесния и бърз начин да го сторите.

На повечето от вас е ясно, че за да центрираме един елемент по хоризонтала (било то div, span, a, ul и пр.) е необходимо да му задаем ширина и margin: 0 auto. В някои по-специални ситуации, наложени от по-специални браузъри, трябва да добавим text-align: center и така нещата се получават, но в 99% от случаите ви е необходимо само margin: 0 auto. По-интересното е как да центрирате елемента по вертикалата, така че да стои винаги в средата на браузъра (или родителския елемент, ако пожелаете). Основният проблем идва от различните резолюции, на които се гледа сайтът. Точно за това ни трябва нещо универсално, което не е свързано с условности и изчисляване на безкрайни комбинации.

За примера днес ще направим нещо съвсем простичко, за да ви стане напълно ясно за какво говоря. Ще използваме един div, който ще центрираме спрямо екрана. Няма да пишем никакъв javascript. Изображения също не съм ползвал, тъй като, както казах се стремя да е максимално опростено.

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

Тагове: CSS, vertical centered div, вертикално центриране с css

Промяна на цвета при селектиране на текст само с CSS

от Георги Калайджиев в CSS на 18.03.2010 с няма коментари и 947 прегледа

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

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


::selection { background: #6bcf44; color: #fff; } /* Opera, Chrome, Safari */
::-moz-selection { background: #6bcf44; color: #fff; } /* Firefox */

Имайте предвид, че единствените пропъртита, които може да сложите на тези селектори са color, background и background-color. Освен това въпросните селектори остават непознати, както за архаичния Internet Explorer 6, така и за новите версии 7 и 8. На останалите браузъри няма проблем, само за Opera ще трябва да ползвате по-актуална версия (над 9.5).

Тагове: change text selection color, CSS

Страница 2 от 2
<
1
2

Fridaycode.net

Първи стъпки в CSS3 или как да създадем анимирани табове!

Направете си набързо Tooltip с jQuery

По-удобна навигация с jQuery

Пълна :hover поддръжка в Internet Explorer 6

Разлики между b, i и strong, em

Лепкав "Sticky" Footer само с CSS

Simple Drop Down Menu w/ CSS & jQuery

Хоризонтално и вертикално центриране на елемент с CSS

Промяна на цвета при селектиране на текст само с CSS

Категории

Най-четено

Тагове