Статьи

10 потрясающих плагинов CSS / JS и методы кодирования

Вы можете создать несколько впечатляющих сайтов с очень небольшим количеством CSS и JavaScript. В этом посте мы собрали 10 из сотен (еще больше в следующем посте) удивительных плагинов CSS и JavaScript и методов кодирования, которые обязательно должны быть в вашем наборе инструментов. Наслаждайтесь!

1. Используйте CSS3 для создания динамического стека карт индекса

В этом руководстве вы узнаете, как создать динамический стек индексных карточек исключительно с использованием HTML и CSS3 и использовать такие функции CSS3, как преобразование и переход (для динамических эффектов) и @ font-face, box-shadow и border-radius ( для укладки).
Использование CSS3-к-Create-A-Dynamic-Stack-оф-Index-Cards.jpg
Источник

2. Динамическое положение тени PNG и непрозрачность

Узнайте, как создать подвижный объект с помощью JavaScript.
Динамический PNG-тень-позиционно-opacity.jpg
Источник

3. Потрясающие наложения с CSS3

Градиентная граница, переходящая от светлого к более темному при движении сверху вниз, — вот фокус с этими наложениями. Для создания этого эффекта мы использовали свойство border-image, которое является небольшим хитрым дополнением к CSS.
Потрясающие-наложения-с-CSS3.jpg
Источник

4. Как создавать глубину и красивые 3D ленты только с помощью CSS3

Чтобы создать тень с помощью RGBa (цветовая модель, которая позволяет оптимизировать контраст с любым видом фона), мы будем использовать box-shadow. RGBa является стандартной моделью RGB (0,0,0 — 255,255,255) и добавляет последний параметр (а) для непрозрачности. Мы можем использовать эту модель и для других свойств, и она работает с новым браузером.
Как к Create-Depth-и-Ницца-3D-ленты-Only-Using-CSS3.jpg
Источник

5. Полутоновое меню навигации с jQuery и CSS3

Научитесь создавать меню навигации в полутоновом стиле CSS3 и jQuery, которое позволит вам отображать анимированные фигуры в полутоновом стиле в соответствии с навигационными ссылками, а также предоставит простой редактор для создания дополнительных фигур.
Полутона-навигационно-меню-С-JQuery-CSS3.jpg
Источник

6. Создание Coverflow с помощью CSS-преобразований

Узнайте, как создать эффект Coverflow, который фактически перемещается и анимируется в режиме реального времени, без использования холста или предварительно визуализированной графики.
Строительство-Coverflow-с-CSS-Transforms.jpg
Источник

7. Сойти с ума с помощью CSS-переходов

Вы узнаете, как преобразования CSS 3 и переходы WebKit могут дополнить способ представления изображений на вашем сайте.
Отправляясь гайки-с-CSS-Transitions.jpg
Источник

8. Скользящий винил с CSS3

Чтобы создать скользящий виниловый эффект для демонстрации любимой музыки, мы берем стандартную обложку альбома, немного HTML и некоторые CSS3-переходы и преобразования.
Скользящие-винил-с-CSS3.jpg
Источник

9. Весело с CSS3 и Mootools

Эти примеры появились при экспериментировании со свойством extended в MooTools. Расширяя класс стилей, я мог бы добавить свойства CSS3 в инфраструктуру Core MooTools и сделать CSS3-анимацию.
Fun-с-CSS3-и-Mootols.jpg
Источник

10. Веселье с 3D CSS и видео

Зак Джонсон получал удовольствие от трехмерных эффектов с помощью CSS, таких как его изокуб выше, который представлен простым HTML (включая видео-тег для воспроизведения видео на поверхности!) И некоторыми CSS.
Fun-с 3D-CSS-и-video.jpg
Источник