2009 17 февраля 2009

Understandng собственности CSS клип

Почему я хочу, чтобы это понимать?? Хамм ...!!

Большинство писателей CSS согласятся, что CSS клип собственности, вероятно, одним из самых неиспользованных свойств CSS. Это было так верно и для меня и был самый счастливый пренебрегать этим, пока я не начал изменения MooTools ДВА ручку (Pin) Slider Компонент (с Range Indicator) .

Существовал хорошее предложение от одного из компонентов пользователям изменять Slider Компонент использованием обрезанный Справочный изображения (по сравнению с переменной шириной деление), чтобы указать ползунка диапазона. Таким образом, пришло мое время, чтобы войти в удовольствие, но не-уставных (для меня конечно же) воды имущества клип CSS.

Ну! как трудно это может быть? Не так много на всех ... ДА и НЕТ. Синтаксис CSS собственности Клип довольно прямой, но смысл / usuage немного croocked. С памятью, как у меня, каждый раз, когда я сижу в переделку на мой Slider сценарий ... У меня есть tokeep возвращаясь к использованию этого клипа собственности, чтобы напомнить себе логику, которую я создал в мой сценарий .... Отсюда! думал пера его, в надежде вспомнить его будущем (а также в интересах тех, кто, кажется Поражает собственности клипа CSS)

Что такое CSS клип делать?

Клип является частью визуального модуля эффектов CSS 2.1. Проще говоря, его работа заключается в размещении видимое окно в верхней части объекта, который обрезается, поэтому обрезание изображений и создание миниатюр без создания дополнительных файлов (я уже поставил эту возможность для более эффективного использования в компоненте Slider :) )

Используя свойство клипа CSS, вы можете создать вырезку помощью формы прямоугольника. Как и многие другие свойства CSS (например, маржа, отступы и т.д.), используя прямоугольник, необходимо четыре координаты Top, Right, Bottom, Left (TRBL). Croocked природа этого свойства отражает, когда вы внимательно посмотрите, как клип вычисляет область отсечения, используя эти четыре координаты (посылает мозг в жеребьевке на некоторое время). Теперь, чтобы сбить вас с толку нижней начинается сверху, а правая начинается с левой стороны. :) . Вы видите, что я сказал? .... Таким образом, этот пост ...

Эта небольшая путаница может легко исчезнуть, с этим визуальным объяснение CSS Clip / прямоугольник собственности, как показано ниже!!

Требования CSS клип

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

original_image clip_demo
Оригинальный Thumbnal / Image Клип Требования к Sqaure Thumbmail

Результаты CSS клип

clip_results

Посмотреть демо | Скачать файлы исходного кода


2008 4 сентября 2008

Исправлена ​​ошибка (что остается неизменным в окне прокрутки) Page блоки с помощью CSS только

Это сообщение может быть хорошим примером для фразы «Преподавание бабушки сосать яйца" ... Потому что это только основные CSS Stuff. Но для тех, кто, подобно мне, забывая, что это может быть благом. Я всегда думал, (я могу потерять свою работу за эти слова), можно было только, чтобы сохранить некоторые части HTML-содержимое страницы STATIC (то есть, его позиция остается как есть на прокрутки окна), используя смарт-скрипты, делая все эти научные Расчеты найти динамические позиции, захват window.scroll событий и настройка тайм-ауты и т.д.

Никогда не думал, что это может так просто, как это .... Здесь, в CSS / HTML ниже, у меня есть четыре стационарных блоков, один крепится к каждому extrimities на этой странице, сверху, справа, внизу и слева ... разумеется ... Вы можете выбрать одну или несколько, если нужно будет ...

CSS
. Статический {Дисплей: блок; г-индекс: 10; цвет: # FFFFFF; переполнение-х: скрытый; переполнение-й: скрытый; положение: ixed;
}
# {Содержание маржа: 100px 150px 160px 0px; границы: 1px твердых # e6e6e6}

# Обертка-т {верх: 0px; фон: # 33CC66, ширина: 100%, высота: 55 пикселей;}

# Обертка-л {топ: 80px; фон: # FF9966; высота: 300px; ширина: 150px; границы: 2px твердых # e6e6e6;}

# Обертка-б {вниз: 0px; фон: # 3333CC, ширина: 100%, высота: 55 пикселей;}

# Обертка-р {топ: 80px; фон: # 6666FF; высота: 300px; ширина: 140px; границы: 2px твердых # e6e6e6, справа: 0;}

HTML
<div id="contents"> Вы основное содержание страницы </ div>
<div id="wrap-b" class="static">
Статическое содержимое на страницу дно
</ Div>
<div id="wrap-t" class="static">
Статическое содержимое на страницы К началу
</ Div>

<div id="wrap-l" class="static">
Статическое содержимое на страницу оставили
</ Div>
<div id="wrap-r" class="static">
Статических материалах на стр. право
</ Div>

Посмотреть пример здесь wroking


2008 2 июля 2008

Мы используем искусственный Абсолютное позиционирование: Блестящие Макет CCS

Когда я прочитал эту статью на A List Apart " Искусственный Абсолютное позиционирование
Эрик Sol ", я был не меньше, чем впечатлен. Я был подавлен majorly, потому, честно говоря, я задавался вопросом, почему я не могу придумать что-то сказочное, как этот.

Обычно, когда мы создаем CSS макеты, мы используем "ПОЛОЖЕНИЕ" или "плавает", или очень плохая комбинация обоих. Эрик Сол и его команды определяют рядом с идеальной техникой нового типа CSS макета технику, которую они окрестили как "искусственный Абсолютное позиционирование" после искусственного техника колонны, которая имитирует наличие столбца.

Вы знаете, что проблема всех нас, CSS, разработчики с распадающейся макеты (неожиданные изменения содержания, которые вызывают целые столбцы на пленку, когда мы используем плавающий макеты) ... Ну! Похоже, история!!
Этот формат техника еще очень молода, и она должна корзины из всех тех, гуру CSS там, прежде чем она станет ООН письменного стандарта. Я счастлив, что использовать его сейчас! ... И я уже в середине преобразования моих предыдущих проблематично / плавающей не-обязательно макеты в расположение FAP уже ... и рад сказать "мы уже используем искусственный Абсолютное позиционирование для этого блога, а также" ... ВПЕРЕД попробовать, сейчас!

Престижность Эрик!


NDK дома | Выражая IT | Выражая неба | Выражая Penmenship | Выражая трепет | выразить себя