• Страница 1 из 1
  • 1
Форум Studio AD » Сайтостроение » Общий форум по CSS » Стрелка на css (без использования изображений)
Стрелка на css
Aleko
Дата: Воскресенье, 30.08.2009, 21:04 | Сообщение # 1
Watching you
Группа: Администраторы
Пользователь №: 2
Сообщений: 1621
Получено оценок: 167
Технология css позволяет нам создавать такие формы, о которых порой и не подозреваешь. Так, для того чтобы создать стрелочку, используя только css и html, достаточно создать div и присвоить ему нужные стили. Пишем код:
Code
<div style="border-top:5px solid transparent;border-left:5px solid #88aa00;border-bottom:5px solid  transparent;height:0;width:0;font:0"></div>
И видим результат:

Этот способ одинаково работает во всех современных браузерах. В ie5.5 и ie6 не работает параметр transparent, поэтому необходимо указывать цвет.


Бесплатные обои.
  
ad
Дата: Воскресенье, 30.08.2009, 21:25 | Сообщение # 2
Группа: Удаленные
Ого, не предполагал что так можно делать. Таким образом интересно можно нарисовать такую иконку ? Пиксель за пикселем )
  
Aleko
Дата: Воскресенье, 30.08.2009, 23:11 | Сообщение # 3
Watching you
Группа: Администраторы
Пользователь №: 2
Сообщений: 1621
Получено оценок: 167
ad, я тебя наверное удивлю сейчас, но можно подключать изображения и так:

Code
<img src="data:image;base64,R0lGODlhEQAQAPewAP///zN21ChhsitnuyVcqSBIiDFzzy5sxDJ10jBwyh5QliJWoK2/2hM7cihfri1rwypitDBxzCpluDN31jFzzidapiddqi1qwRtDgCVXojJ10xtJiSFHhm+JsBVAexxCfjV52hhAeiBHhsvb8Mva8BU/ehxJhyNSmCtmuhhEfzpzwzN21VuCuRxKiR5EgRxLjhY8dGGNzDBxyiBHhSBFhCVVnh9Fgxo/eTZ73Vl+siNSmi1YliBFgxtDfhhCfyderRtBfcbS4xM6cCZapSZZpIqevPn6+yhgryhdqyBOkCZWn8rY6/f4+i9ux0pwqFuBtxpEgS9wyYCZvq7B3fz9/h1DgBlGhRxGhBhEgSJWnxU/eBhEgCJPkhdAeh5MjhtIhxU7cytnvCNSmZyxzxZAexI7cSFMjhtMjStovR9GhSJPkz1knrrJ3ilhsVyDuxtBeh1EgDR42Sxovlp/tSRUnRxDf6O+4xtCfR5DfxxAfCdbqCNRlSZcqV6HwrzN5i5txjF00BI6cClitB5NkVR3p9zi7Bk+d+3w9ShfrxU/eR1Dfh1Mjylhsh5RlxtLjF2HwSBKjC5txZuvyxZCff3+/iFNkC5amBlBfBtLjSFPk1d6rTFyzRU+eBlGhCpktx9GhEZroBhGhBc9dhpHgx9IiBI5byFJiylktjpfliBMjTJ00BhFhFaL1CZXoiVbp+rt8v///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA  AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA  AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAALAALAAAAAARABAAAAj/AGEJHEiw4MAEFBAECICAQoJIF8J4EuCAj0ADAeLgALECkIw/FwacavNDz0UNEyYEUBWhyQM5EiAgsjBEYJQIm1iNIGFHBZqYR5BUaCXwwYEDMQA88rNEECMHFipkqCEQxYABfQAQYQHA1RQADJTQ0SFQgFk3AJ4wYJOD0honYk7sEUig7hwAQcZYSiLp  kJRMargIXLAgiyYqLRYN2oGqA5NUlcwIbKRAASEjX154AVXoVRFSkEwJPIPJ0agUnTaYuNLjjaI0BQoItBJq1ZZJPrBAwXDnA5xPImYIJOOhRCJOWrqEuASkThUXNmgIbNCgTKBSQsDA  EGXoRh48PDgYBBxfMCAAOw==" />

В итоге получим:

Это изображение создалось автоматически, точнее перекодировалось браузером из строки base64 кода. Оно взято не откуда то а уже описано в коде страницы.


Бесплатные обои.
  
DSC
Дата: Воскресенье, 30.08.2009, 23:20 | Сообщение # 4
спикер
Группа: Проверенные
Пользователь №: 127
Сообщений: 516
Получено оценок: 41
и как тогда я могу сделать подобное с другими изображениями??? O_o

aka Latro
  
ad
Дата: Воскресенье, 30.08.2009, 23:28 | Сообщение # 5
Группа: Удаленные
ОМГ! Aleko, O_o Знаеш, я думаю что это страницу утежелит в тыщю раз, легче будет просто вставить ссылку на изображение )
  
DSC
Дата: Воскресенье, 30.08.2009, 23:39 | Сообщение # 6
спикер
Группа: Проверенные
Пользователь №: 127
Сообщений: 516
Получено оценок: 41
ad, согласен с тобой, я уже проверил как это работает, оно утежиляет не на 1000 раз, но приличненько так!) ^_^

aka Latro
  
-=FoX=-
Дата: Понедельник, 31.08.2009, 00:24 | Сообщение # 7
молчун
Группа: Проверенные
Пользователь №: 31
Сообщений: 18
Получено оценок: 3
Quote (Aleko)
я тебя наверное удивлю сейчас

меня удивил

ну а на счёт самой стрелки дак это легче просто вставлять стрелку от шрифта arial (( ► - круто? XD)) чем прописывать столько кода (:

  
Aleko
Дата: Понедельник, 31.08.2009, 03:38 | Сообщение # 8
Watching you
Группа: Администраторы
Пользователь №: 2
Сообщений: 1621
Получено оценок: 167
Quote (DSC)
и как тогда я могу сделать подобное с другими изображениями???

Например использовать сервис http://www.scalora.org/projects/uriencoder

Quote (ad)
Знаеш, я думаю что это страницу утежелит в тыщю раз, легче будет просто вставить ссылку на изображение )

Зато не нужно будет делать лишний http запрос на сервер.

Quote (-=FoX=-)
ну а на счёт самой стрелки

Моим способом можно создавать кучу всяких треугольных фигур.

Quote (-=FoX=-)
меня удивил

А вы знаете, что GIF изображения возможно создавать на клиентской стороне? Единственный способ, который я нашел в интернете - библиотечка Glif. Она способна создавать gif изображения на лету. К сожалению только двухцветные.


Бесплатные обои.
  
ad
Дата: Понедельник, 31.08.2009, 03:49 | Сообщение # 9
Группа: Удаленные
Quote
Зато не нужно будет делать лишний http запрос на сервер.

Да, но согласись что с изображением все таки лучше. Правда если нужно сделать что нидь простое вроде стрелки что ты продемонстрировал то это будет весьма кстати.

  
Aleko
Дата: Понедельник, 31.08.2009, 03:53 | Сообщение # 10
Watching you
Группа: Администраторы
Пользователь №: 2
Сообщений: 1621
Получено оценок: 167
ad, это хорошо использовать например в скриптах, когда нужна пара стрелок, и не приходится вместо одного файла выкладывать 10.

Бесплатные обои.
  
ad
Дата: Понедельник, 31.08.2009, 04:00 | Сообщение # 11
Группа: Удаленные
Aleko, Это да. Слушай, а можеш поделиться цветами ? Ну я имею ввиду у тебя тут в ббкодах есть всплывающее окошко с цветами, я хочю такое же, или дай ссылку на скачку с установкой ColorPicker. Понимаеш, я $BBCODES$ удалил и вставил сам код кнопок с заданными Функциями, но в цветах оказалась неполадка, там короч я выбираю цвет и затем если мне где-то еще нужно выделить цветом то нужно задавать основной цвет и только затем уже нужный, мне это не нравится (
  
Aleko
Дата: Понедельник, 31.08.2009, 13:53 | Сообщение # 12
Watching you
Группа: Администраторы
Пользователь №: 2
Сообщений: 1621
Получено оценок: 167
ad, напишу урок потом.

Бесплатные обои.
  
Форум Studio AD » Сайтостроение » Общий форум по CSS » Стрелка на css (без использования изображений)
  • Страница 1 из 1
  • 1
Поиск:
© Studioad.ru 2006 · 2010. Использование материалов форума на сторонних ресурсах без прямой обратной ссылки строго запрещено. Хостинг от uCoz.