[CSS] Градиенти


18
Здравейте, пускам тази тема с цел да обсъждаме и да споделяме полезни видеа и уроци за градиенти. Реших да направя едно видео, за това как да си генерираме лесно градиент от картинка.
Ето и стъпките от видеото:
1. Селектираме си желаната картинка и я копираме. 2. Създаваме нов файл и пействаме картинката в него. 3. Запазваме я. 4. След това отиваме на http://www.colorzilla.com/gradient-editor/ и избираме import from image -> избираме желаната картинка -> import -> copy
Извинявам се, че на видеото не се вижда курсора на мишката, не знам защо това е така.
http://www.youtube.com/watch?v=6ND0_Dw7OTo



Отговори



7

Браво, колега! 

Аз лично "не мога да пиша" и за популяризиране на блога си със сигурност бих използвал видео уроци. От много време имам доста идеи, но все отлагам..(в последните месеци е ясно защо :))

Освен задоволството от това, че се чустваш полезен когато помагаш, ето няколко други причини, защо да се използва видео:

  • задържа посетителите по-дълго
  • подобрява трафика към сайта
  • подобрява индексирането и ранга 
  • създава интерактивност

В последните години уеб видеото е и основен инструмент при оптимизацията на комерсиални сайтове за продукти и услуги така, че може да добавим и повишаване на продажбите.

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

http://videomind.ooyala.com/blog/online-video-make-86-percent-internet-traffic-2016

http://www.brafton.com/news/video-for-seo-90-percent-of-consumers-watch-video-online-search-drives-discovery

 


от bobbykolev (4168 точки)


3

Колега браво за старанието и за полезната тема аз лично имам проблеми с градиентите и без странична помощ (от някой сайт) винаги бъркам синтаксиса, понеже всеки браузър си има собствено мнение по темата.

Мисля, че този сайт е полезен http://gradients.glrzad.com/  има си къде да си поставиш кода на цветовете,  да си избереш в каква посока да се появи градиента и не на последно място изкарва код за всички браузъри

Дано е полезен на някого :)


от son4etyyy (416 точки)


3

Градиентите са готин начин човек да направи страницата приятно изглеждаща, като същевременно запази ниското време за зареждане. http://gradients.glrzad.com/ e доста удобен генератор, използвах го докато правех калкулатора от домашното, но не е напълно cross-browser и лесно можем да отгатнем кой е браузъра, който се дъни :D

Макар процента на използващите IE версия 9 и надолу да намалява в полза на по-добрите браузъри, като добри фронт-ендъри е хубаво да мислим за поддръжката му докато все още е жив. Ето какво бихме могли да направим в тази връзка.

За хората, които дори сами не знаят защо си го причиняват, а именно използват IE6 или IE7 добавяме следното:
filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#000000', endColorstr='#ffffff');

За тези, които използват IE8, IE9 използваме същия код, но вместо filter, пишем -ms-filter.
-ms-filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#000000', endColorstr='#ffffff');

Градиента приема 3 параметъра, като GradientType указва посоката му, т.е. GradientType=1 ще генерира хоризонтален градиент и GradientType=0 - вертикален, а startColorstr и endColorstr дефинират съответно началния и краен цвят на градиента.


от bmmarinov (1498 точки)


1
Супер, че си споделил това! Днес говорихме с колеги на лекцията, оказва се, че доста хора се мъчат да ги правят ръчно, което на този етап е малко сложно.
Само нещо искам да добавя към темата - като се генерират по този начин и ползваш кода, CSS валидаторът вади МНОГО грешки. Днес и това обсъждахме - грешките относно градиентите при валидация можем да ги игнорираме, защото във всички браузъри имплементацията е на различен етап и валидатора 'недоволства'.
Поздрави, Дони

от doni.todorova (1245 точки)


0

Темата за градиентите е интересна!Често използвам автоматично генерирани кодове за тях,не знам защо валидатора на CSS понякога ги дава като грешки - неизвестно свойство и т.н.На нчкого да му се е случвало нещо подобно?!indecisionДруг въпрос е наистина,че браузърите ги интерпретират различноindecision


от ivobuilder (147 точки)