У Вас в настройках PHP register_globals=ON? какеры идут к Вам!!!

Файловый Архив

  • Неограниченное количество категорий и суб-категорий
  • Настройки прав доступа по группам
  • Настройки прав доступа по каждой категории
  • Предпросмотр медиа файлов: FLV, IFLV, F4A, F4V, MP4, MP3, MOV и других...
  • Мультизагрузка файлов - SWFUploader
  • Добавление файлов с сервера
Подробности и история обновлений продукта в этой теме
Loading

Go Back   форум vBSupport.org > >
Register Изображения Меню vBsupport Files Manager Аллея Звёзд Реклама на форуме Search Today's Posts Mark Forums Read
  • Мемберка
  • Администраторам
  • Premoderation
  • For English speaking users
  • Изменения в правах
  • Каталог Фрилансеров
Пароли на скачивание файлов в Member Area меняются автоматически каждый день
Если вам нужно скачать какой то скрипт, за паролем ко мне в ЛС
привет какирам kerk
Ещё раз обращаем Ваше внимание: всё, что Вы скачиваете и устанавливаете на свой форум, Вы устанавливаете исключительно на свой страх и риск.
Сообщество vBSupport'а физически не в состоянии проверять все стили, хаки и нули, выкладываемые пользователями.
Помните: безопасность Вашего проекта - Ваша забота.
Убедительная просьба: при обнаружении уязвимостей или сомнительных кодов обязательно отписывайтесь в теме хака/стиля
Спасибо за понимание
На форуме введена премодерация ВСЕХ новых пользователей

Почта с временных сервисов, типа mailinator.com, gawab.com и/или прочих, которые предоставляют временный почтовый ящик без регистрации и/или почтовый ящик для рассылки спама, отслеживается и блокируется, а так же заносится в спам-блок форума, аккаунты удаляются
for English speaking users:
You may be surprised with restriction of access to the attachments of the forum. The reason is the recent change in vbsupport.org strategy:

- users with reputation < 10 belong to "simple_users" users' group
- if your reputation > 10 then administrator (kerk, Luvilla) can decide to move you into an "improved" group, but only manually

Main idea is to increase motivation of community members to share their ideas and willingness to support to each other. You may write an article for the subject where you are good enough, you may answer questions, you may share vbulletin.com/org content with vbsupport.org users, receiving "thanks" equal your reputation points. We should not only consume, we should produce something.

- you may:
* increase your reputation (doing something useful for another members of community) and being improved
* purchase temporary access to the improved category:
10 $ for 3 months. - this group can download attachments, reputation/posts do not matter.
20 $ for 3 months. - this group can download attachments, reputation/posts do not matter + adds eliminated + Inbox capacity increased + files manager increased permissions.

Please contact kerk or Luvilla regarding payments.

Important!:
- if your reputation will become less then 0, you will be moved into "simple_users" users' group automatically.*
*for temporary groups (pre-paid for 3 months) reputation/posts do not matter.
Не можете скачать вложение?
Изменения в правах групп пользователей
внимательно читаем эту и эту темы
Короткая версия - тут
Уважаемые пользователи!

На форуме открыт новый раздел "Каталог фрилансеров"

и отдельный раздел для платных заказов "Куплю/Закажу"

 
 
Old  
Liked
Специалист
 
Liked's Avatar
Default Использование спрайтов на форуме 6

Решил написать статью об спрайтах (Css Sprites). Статью о них вроде бы никто не писал здесь.

Итак. Спрайты - это изображение, на котором изображены другие картинки, например кнопки или иконки. Пример: BB коды в CKEditor'e

Для чего же их используют?
Они позволяют увеличить скорость загрузки тех или иных картинок, которые вы поместили в изображения
Уменьшается объем тех изображений и происходит сжатие.


Я не советую делать весь сайт из спрайтов, так как потом будут большие проблемы.
Пример: Вы потратили кучу времени, чтобы собрать все картинки и поместить их в одно изображение. Вам придется менять множество классов. А если захотите поменять тот или иной объект вам опять придется создавать новый спрайт. Думаю, поняли.


CSS Спрайты нужно использовать у схожих объектов (кнопки, иконки и др).


Перейдем к практике.

Допустим, у нас есть две кнопки соц. сетей (Вк и Twitter). Для уменьшения объема страницы поместим изображения в одну картинку.



Ненужно карячиться в паинте или ФШ, для этого есть специальные сервисы, CSS Sprites Генераторы

Я пользуюсь этим.

Легкий и простой интерфейс. Все что нам нужно.

Берем эти две "кнопки" и загружаем. Можете выбрать для себя подходящие функции, я обычно ничего не меняю.

Теперь качаем полученный спрайт и загружаем на фтп (или куда вам угодно).

Допустим, он (спрайт) располагается по следующему пути: images/sprite.png


Теперь CSS и HTML


Это код кнопок. vk - кнопка Вк; tw - кнопка Твиттер
Code:
<a href="vk"><span class="vk">&nbsp;</span></a>
<a href="tw"><span class="tw">&nbsp;</span></a>

CSS

У нас есть два класса:

.vk и .tw

Для них нужно указать бэкграунд (т.е. сам спрайт и расположение расположение фона).

Заново открываем страницу с генератором, смотрим, что нужно указать для каждого элемента:

Code:
vk - background-position: 0px 0px;
tw - background-position: 0px -50px;

Я не буду использовать отдельно backgpound-position, а помещу его в background.

Code:
.vk {
background: url(images/sprite.png) 0 0px; /* 0 0px это и есть background-position*/
}



.tw {
background: url(images/sprite.png) 0 -50px; /* 0 -50px это и есть background-position*/
}


На этом все

Last edited by Liked : 10-10-2013 at 11:31 PM.
 
Bot
Yandex Bot Yandex Bot is online now
 
Join Date: 05.05.2005
Реклама на форуме А что у нас тут интересного? =)
Old  
Sven
Верстальщик
 
Sven's Avatar
Default 1

Качественней указывать через background-position, просто по причине того, что название картинки или путь к ней может измениться, тогда придется все менять

Sven добавил 10.10.2013 в 22:17
Quote:
Originally Posted by Liked View Post
У нас есть два класса:
не классы, а идентификаторы

Last edited by Sven : 10-10-2013 at 11:17 PM. Reason: Добавлено сообщение
 
Old  
Liked
Специалист
 
Liked's Avatar
Default 0

Quote:
Originally Posted by Sven View Post
не классы, а идентификаторы
ну да, не знал как назвать по-другому
 
Old  
Sven
Верстальщик
 
Sven's Avatar
Default 1

Quote:
Originally Posted by Liked View Post
ну да, не знал как назвать по-другому
http://htmlbook.ru/samcss/identifikatory

И раз уж поменял ИД на классы, так и в хтмл коде смени
 
Old  
Liked
Специалист
 
Liked's Avatar
Default 0

@Sven, вовремя меня исправляете)
 
Old  
Sven
Верстальщик
 
Sven's Avatar
Default 0

Quote:
Originally Posted by Liked View Post
Я не советую делать весь сайт из спрайтов, так как потом будут большие проблемы.
Кстати, это не так))
На ютубе сделано на спрайтах http://s.ytimg.com/yts/imgbin/www-hi...-vfl9MM9nN.png
Если делать с головой на плечах, то все выходит очень даже хорошо
 
Old  
Sven
Верстальщик
 
Sven's Avatar
Default 0

Quote:
Originally Posted by vlady View Post
лучше сделать общий класс, напр. sprite, и задавать там общий background-image. А background-position присваивать уже конкретным классам. Так css будет читабельней, легче и быстрее))
Я об этом и писал, но ТС предпочел сделать так.
Но как совет, лучше добавить пример от @vlady в 1 пост, чтоб пользователям был выбор, как они хотят делать

Sven добавил 10.10.2013 в 23:06
Quote:
Originally Posted by vlady View Post
<a href="sprite vk"><span>&nbsp;</span></a>
<a href="sprite tw"><span>&nbsp;</span></a>
Боюсь не выйдет т.к. не указан класс))
Везде классы прописаны в href )))

Last edited by Sven : 10-11-2013 at 12:07 AM. Reason: Добавлено сообщение
 
Old  
vlady
Эксперт
vBSponsor
Default 0

@Sven, ну на самом деле, мой вариант является костылем для приведенного кода. Грамотнее внедрять спрайты иначе, а эту статью вообще не читать.
 
Old  
Sven
Верстальщик
 
Sven's Avatar
Default 0

Quote:
Originally Posted by vlady View Post
ну на самом деле, мой вариант является костылем для приведенного кода
Я понимаю, но стоит исправить ошибки....если уж согласились написать "дополнение"
 
Old  
Abraxas
Эксперт
 
Abraxas's Avatar
Default 0

Оффтоп
 
 

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off




All times are GMT +4. The time now is 04:04 AM.


Powered by vBulletin® Version 3.0.12
Copyright ©2000 - 2016, Jelsoft Enterprises Ltd.