Какво е Friday Code?

Това е място за хора, които считат писането на код същевременно за изкуство и част от ежедневието. Това е място, където можем да се съберем и да обсъждаме всичко без задръжки, тъй като всички тук сме равни. Това е място, където информацията и придобитите знания са безценни. Всичко от нас се прави за удоволствие! Ако искате да се свържете с екипа за предложение, запитване или критика, може да използвате контактите.

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

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

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

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

  • Facebook
  • Twitter
  • Digg

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
  • Digg

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

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

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

  • Facebook
  • Twitter
  • Digg

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

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

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

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

  • Facebook
  • Twitter
  • Digg

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

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

  • Facebook
  • Twitter
  • Digg

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

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

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

  • Facebook
  • Twitter
  • Digg

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

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

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

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

  • Facebook
  • Twitter
  • Digg

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

Ето и решението, което понякога може да се окаже наистина полезно, особено ако сте перфекционист и държите абсолютно всичко в дизайна ви да се вписва на 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).

  • Facebook
  • Twitter
  • Digg