МоёМесто
Мои Ссылки
Друзья
Группы
Настройки
Помощь
Забыли пароль?
войти
Быстрая регистрация
Добро пожаловать! Что такое
МоеМесто
? Это
сервис интернет закладок
. Здесь Вы можете
зарегистрироваться
, установить
МоеМесто::Панель
в свой браузер, и хранить все свои закладки, заметки и
файлы
.
Подробнее ...
всё
закладки
заметки
файлы
архив
Закладки в категории "
2_Web-Design
" с меткой
example
206 ссылок
все метки
/
2_Web-Design
/
example
+
1920px
animation
API
architecture
article
background
book
bootstrap
business
buttons
catalogue
CMS
code
codepen_io
CrossBrowser
css
CSS3
DEMO
design
download
Drupal
flash
font
fonts
framework
gallery
generate
generator
Google
Habrahabr
help
Hover
HTML
HTML5
Image
inspiration
interface
JavaScript
jQuery
landing_page
layout
links
list
Logo
map
material_design
menu
mobile
on-line
parallax_scrolling
Photoshop
Pinterest
plugin
portfolio
programming
read_later
reference
RosASK
rwd
Scroll
service
shop
site
slider
snippet
SVG
template
templates
test_me
text
theme
tutorial
tympanus.net
type
video
Vkontakte
web-design
webdesign
WordPress
Yandex
Youtube
?
сортировать
|
показывать
|
искать
25 let RSTS
в блог
Анимация - цветное пятно колышется на фоне, цвет изменяется при прокручивании страницы.
добавил:
anartist
10 августа 2019
комментировать
метки:
example
site
background
animation
inspiration
web-design
ВГТРК
в блог
Сайт неск. каналов ТВ, сделанный ярко и красочно. Подсмотреть дизайнерские тренды. Что делают со шрифтами, с градиентами, с фотографиями и т.п.
добавил:
anartist
22 февраля 2019
комментировать
метки:
design
web-design
inspiration
site
example
MANGO . 2017 on Behance
в блог
Пример дизайна для LP, Quiz.
добавил:
anartist
19 февраля 2019
комментировать
метки:
landing page
site
example
inspiration
web-design
Rocketplus - Google Sheets
в блог
Пример расчёта стоим. вебсайта (одностраничного?) в виде интерактивной таблицы.
добавил:
anartist
15 февраля 2019
комментировать
метки:
web-design
example
site
Excel
money
business
Personal & Business Car Leasing | LINGsCARS
в блог
Пример оригинального кричащего сайта.
добавил:
anartist
7 января 2019
комментировать
метки:
web-design
inspiration
site
example
CRYPTO CONTROL LTD
в блог
добавил:
anartist
3 ноября 2018
комментировать
метки:
site
inspiration
example
web-design
Цены на дополнительные услуги по доработке сайта
в блог
Расценки на доработки
добавил:
anartist
6 августа 2018
комментировать
метки:
read later
householder
business
example
site
web-design
Bootstrap Modal and popover with Velocity.js animation
в блог
добавил:
anartist
14 июля 2018
комментировать
метки:
bootstrap
Bootstrap 4
animation
JavaScript
library
codepen io
example
web-design
Как искать заказы веб-дизайнеру / Новые способы и подробнее о старых - YouTube
в блог
добавил:
anartist
16 мая 2018
комментировать
метки:
example
video
Youtube
web-design
business
design
Code School - SVG Animation - Logo
в блог
добавил:
anartist
2 мая 2018
комментировать
метки:
animation
SVG
Logo
web-design
codepen io
example
inspiration
code
css
30 Awesome SVG Animation For Your Inspiration - Hongkiat
в блог
добавил:
anartist
2 мая 2018
комментировать
метки:
example
inspiration
animation
SVG
codepen io
list
web-design
Bootstrap Snippet Rotate Icons / Fontawesome Icons Rotate using HTML CSS | Bootsnipp.com
в блог
{
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
transition: 0.5s;
}
Desctop, Android +
ul li a:hover i {
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
добавил:
anartist
20 апреля 2018
комментировать
метки:
web-design
snippet
example
buttons
social
Modal with blur effect like iOS - Bootsnipp.com
в блог
Good example.
Desctop +,
Android +,
iPad ?
добавил:
anartist
20 апреля 2018
комментировать
метки:
bootstrap
web-design
snippet
example
Hover Effect CSS for Bootstrap Gallery
в блог
добавил:
anartist
20 апреля 2018
комментировать
метки:
bootstrap
Hover
example
web-design
codepen io
snippet
Material Design Box Shadows Examples
в блог
6 variants of shadows
добавил:
anartist
20 апреля 2018
комментировать
метки:
material design
example
reference
web-design
codepen io
snippet
БМ, "Как заработать первый миллион?" на ТНТ. Часть 2
в блог
История о девушке, которая шила платья - с 11 минуты.
добавил:
anartist
4 апреля 2018
комментировать
метки:
business
example
video
Youtube
inspiration
web-design
Советы Михаила Нозика
в блог
Советы по верстке сайтов и не только.
добавил:
anartist
3 марта 2018
комментировать
метки:
illustration
text
layout
design
inspiration
example
web-design
comments
Учебный Центр Сергея Бриза | Учебный Центр Сергея Бриза
в блог
Сайт средней крупности (визитка ?).
добавил:
anartist
12 февраля 2018
комментировать
метки:
example
web-design
site
Pinterest, divinapresenca.com.br
в блог
Эзотерика в картинках дурного вкуса (какая-то секта?). Портреты мистических мифических персонажей. В некот. случаях местами интересны эффекты: сияние глаз, световые градиенты, туманы, лучи, местами интересные приёмы: цвет, проступающий сквозь сияние, тонущие в сиянии формы, глубина пространства в световом тумане.
добавил:
anartist
26 января 2018
комментировать
метки:
Pinterest
Photoshop
example
inspiration
web-design
html - Bootstrap row on top of another - Stack Overflow
в блог
добавил:
anartist
4 декабря 2017
комментировать
метки:
snippet
web-design
example
stackoverflow com
bootstrap
layout
Модульные дома Holtsov house в Санкт-Петербруге
в блог
добавил:
anartist
23 ноября 2017
комментировать
метки:
web-design
architecture
inspiration
business
site
example
okayNav Demo
в блог
http://num.to/4927-2185-5743
- shortened link
Responsive Menu
https://github.com/VPenkov/okayNav
- see animated GIF.
Android +
iPad +
добавил:
anartist
20 ноября 2017
комментировать
метки:
menu
rwd
codepen io
snippet
example
jQuery
web-design
Услуги и цены » Блогоарт — разработка блогов и сайтов на WordPress
в блог
Пример сайта агентства какого-то вебдизайнерского.
добавил:
anartist
20 октября 2017
комментировать
метки:
business
web-design
example
inspiration
сохранили
2 раза
Разработка сайтов от агентств из списка ТОП-100. Рейтинг веб-студий — если нужно создание сайта.
в блог
Ценовые диапазоны:
НИЖНИЙ — меньше 200 000 р.
СРЕДНИЙ — 200 000 - 500 000 р.
ВЕРХНИЙ — 500 000 - 1 000 000 р.
ПРЕМИУМ — выше 1 000 000 р.
добавил:
anartist
26 сентября 2017
комментировать
метки:
business
web-design
rating
example
сохранили
3 раза
BrightMedia
в блог
Ну, навороты! Анимация, параллакс-эффект, SVG.
Ещё один их сайт:
http://personalbrandinstitute.com/
добавил:
anartist
5 августа 2017
комментировать
метки:
SVG
animation
site
web-design
inspiration
example
Inspiration for Article Intro Effects | Demo 1
в блог
Эффект, предваряющий статью или сайт. Начинается с демонстрации фонового изображения на весь экран.
Демо:
https://tympanus.net/Development/ArticleIntroEffects/index.html
--
PUSH, FADE OUT, SLICED, SIDE, FIXED SIDE, GRID, JAM 3
PUSH - как бы погружаешься под изображение.
- на маленьких - хорошо.
http://num.to/1900-0420-2856
FADE OUT - низ изображения закрывается светлым градиентом, на нём текст.
- на маленьких - не очень.
SLICED - разрезается посередине, в разрезе возникает заголовок статьи.
- если и применять, то вот этот эффект. Хорошо даже на маленьких экранах.
SIDE - часть картинки оказывается справа в рамке, заголовок уходит влево.
- Эффектно только, когда экран большой. На маленьких экранах рамка выхватывает уже другую область изображения. Сначала туда попадает хвост, а на меньших размерах и хвоста, наверное, нет.
FIXED SIDE - правая часть картинки закрывается непрозрачным фоном, поверх него - текст. Картинка - так и останется зафиксированной слева.
- На маленьких экранах слева остаётся ну очень узкая полоска - в ней ни красоты, ни пользы никакой. Ну можно как-то притянуть идею, как бы намек, мол, вот, что всегда стоит за текстом.
GRID - картинка разбивается на сетку из изображений (разделы), сетка занимает верхнюю часть экрана. Внизу - текст.
- На мобильнике - сетка слишком сужается. Нужна другая сетка, более крупная.
JAM 3 - на картинку снизу наезжает белый фон. Заголовок так и остаётся по центру, но изменяет цвет. А картинка немного уменьшается, показываются поля, и верхняя часть её остаётся наверху.
--
Есть и описание, с картинками:
https://tympanus.net/codrops/2014/05/22/inspiration-for-article-intro-effects/
добавил:
anartist
27 июля 2017
комментировать
метки:
tutorial
web-design
inspiration
example
tympanus.net
Blueprint: Fixed Background Scrolling Layout
в блог
Демо:
https://tympanus.net/Blueprints/ScrollingLayout/
Статья:
https://tympanus.net/codrops/2013/05/02/fixed-background-scrolling-layout/
добавил:
anartist
26 июля 2017
комментировать
метки:
JavaScript
tutorial
example
Scroll
tympanus.net
layout
web-design
Sliding Triple View Layout
в блог
Страницы, их несколько, смещаются вправо-влево по клику на названиях-ссылках. Помещается лишь три ссылки на экране. Своеобразный текстовый слайдер, не умещающийся на весь экран.
JavaScript, CSS 3D Transforms
Демо:
https://tympanus.net/Development/TripleViewLayout/
Статья:
https://tympanus.net/codrops/2013/09/05/sliding-horizontal-layout/
Вариант исполнения - со стрелками:
https://tympanus.net/Development/TripleViewLayoutArrows/
(ссылка на код - в статье).
добавил:
anartist
26 июля 2017
комментировать
метки:
tympanus.net
tutorial
example
layout
web-design
JavaScript
css
Sliding Header Grid Layout (Multi)
в блог
Demo1 (single):
https://tympanus.net/Tutorials/SlidingHeaderLayout/
Demo2 (multi):
https://tympanus.net/Tutorials/SlidingHeaderLayout/layout-multi.html
Article:
https://tympanus.net/codrops/2014/12/23/sliding-header-layout/
Как начальный интерфейс, ведущий к подразделам. Фотография во весь экран сдвигается наверх, открывая прямоугольники разделов.
добавил:
anartist
26 июля 2017
комментировать
метки:
tympanus.net
example
tutorial
flexbox
web-design
layout
PFold: Paper-Like Unfolding Effect
в блог
2012
Интересный эффект - словно разворачивается бумажка. jQuery plugin.
Демо:
https://tympanus.net/Development/PFold/index.html
Статья:
https://tympanus.net/codrops/2012/10/17/pfold-paper-like-unfolding-effect/
добавил:
anartist
26 июля 2017
комментировать
метки:
tutorial
plugin
jQuery
example
tympanus.net
web-design
A Collection of Page Transitions
в блог
2013
Демо: http://tympanus.net/Development/PageTransitions/
http://num.to/1800-0421-0436
Статья:
https://tympanus.net/codrops/2013/05/07/a-collection-of-page-transitions/
На андроиде не отображается кнопка выбора перехода. Кнопка случайного выбора перехода - действует.
добавил:
anartist
26 июля 2017
комментировать
метки:
example
tutorial
web-design
tympanus.net
css
layout
CSS-Only Responsive Layout with Smooth Transitions
в блог
2012 год.
Для лендинга из пяти экранов. Но не действует прокрутка вниз! Перемещение вниз-вверх только нажатием кнопок горизонтального меню, расположенного внизу. Немного анимации текста (сдержанно). Наверху каждому экрану соотв. картинка в треугольнике. Плавный scrolling.
Демо:
https://tympanus.net/Tutorials/SmoothTransitionsResponsiveLayout/
Статья:
https://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/
добавил:
anartist
26 июля 2017
комментировать
метки:
tutorial
web-design
layout
example
landing page
tympanus.net
Fullscreen Pageflip Layout
в блог
Эффект перелистывания страницы, выглядит просто, сгибается, перемещается...
Демо:
http://tympanus.net/Tutorials/FullscreenBookBlock/
Статья:
https://tympanus.net/codrops/2012/12/11/fullscreen-pageflip-layout/
Android, iPad: +
К сожалению, если не вся страница видна на экране, то ужно вниз перематывать.
добавил:
anartist
26 июля 2017
комментировать
метки:
css
layout
example
web-design
tympanus.net
Expanding Overlay Effect
в блог
Как первая страница интерфейса, с подразделами, раскрывающимися на весь экран.
Демо:
https://tympanus.net/Tutorials/ExpandingOverlayEffect/index.html
Статья:
https://tympanus.net/codrops/2013/01/17/putting-css-clip-to-work-expanding-overlay-effect/
Но воплощение объёмное:
много JS, jQuery.
Ipad - отлично, android - (экран маловат, но работает).
добавил:
anartist
26 июля 2017
комментировать
метки:
jQuery
layout
example
JavaScript
tutorial
web-design
Caption Hover Effects
в блог
Эффект с изображением и описанием при наведении мыши.
2013 год.
Интересны: 3, 5, 6 эффекты, т.к. всё происходит в пределах блока. В остальных случаях - выдвигается немного за рамки. Первый... тоже ничего.
Статья:
https://tympanus.net/codrops/2013/06/18/caption-hover-effects/
Демо:
http://tympanus.net/Tutorials/CaptionHoverEffects/
iPad, Android: прекрасно.
добавил:
anartist
26 июля 2017
комментировать
метки:
article
example
Hover
tympanus.net
tutorial
web-design
css
On Scroll Header Effects
в блог
Demo и статья. Для длинных вертикальных сайтов.
Demo:
https://tympanus.net/Development/HeaderEffects/
Статья:
https://tympanus.net/codrops/2013/07/16/on-scroll-header-effects/
Технологии 2013 г., т.е. сейчас с браузерами проблем или совсем нет, или мало.
iPad: +
Android: + (но если landscape - неудобно).
добавил:
anartist
26 июля 2017
комментировать
метки:
example
tympanus.net
tutorial
web-design
Scroll
jQuery
css
Аренда коммерческой техники
в блог
Примерно то же, но на англ.:
https://www.unitedrentals.com/en/equipment
добавил:
anartist
13 июля 2017
комментировать
метки:
example
catalogue
web-design
GitHub - oreillymedia/svg-essentials-examples
в блог
Примеры к книге.
This repository contains interactive examples and other files created for SVG Essentials, 2nd Edition by J. David Eisenberg and Amelia Bellamy-Royds (O'Reilly, 2014). The repository also includes the examples used in a related post on the O'Reilly Radar blog (http://radar.oreilly.com/2014/11/the-once-and-future-svg.html).
добавил:
anartist
15 марта 2017
комментировать
метки:
download
web-design
github
book
SVG
example
How to Scale SVG | CSS-Tricks
в блог
Creating a responsive SVG
добавил:
anartist
2 марта 2017
комментировать
метки:
example
snippet
codepen io
code
SVG
web-design
tutorial
Creating Non-Rectangular Headers | CSS-Tricks
в блог
Много хор. примеров с кодом.
См. также
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Clipping_and_masking
добавил:
anartist
22 февраля 2017
комментировать
метки:
article
example
tutorial
web-design
css
header
SVG animation example
в блог
Архитектурный чертёж. Анимация впечатляет.
добавил:
anartist
2 февраля 2017
комментировать
метки:
example
animation
SVG
web-design
Заказать сайт на wordpress. Разработка под ключ. ★★★★★
в блог
Пример предложения услуг по созданию сайтов на WP.
добавил:
anartist
19 января 2017
комментировать
метки:
site
business
example
web-design
WordPress
(125) 1000+ ideas about Material Design on Pinterest
в блог
добавил:
anartist
17 декабря 2016
комментировать
метки:
interface
material design
design
inspiration
example
app
Pinterest
web-design
1. Navigation - Mobile Design Pattern Gallery, 2nd Edition [Book]
в блог
добавил:
anartist
13 декабря 2016
комментировать
метки:
pattern
web-design
on-line
book
interface
mobile
example
SVG Essentials, O'Reilly book, link to examples
в блог
Книга
SVG Essentials
Год: 2015
Автор: J. David Eisenberg, Amelia Bellamy-Royds / Дж. Дэвид Эйсерберг, Амелия Беллами-Ройдс
Жанр: веб-графика
Издательство: O’Reilly
ISBN: 978-1449374358
Язык: Английский
Формат: ePub
Качество: Изначально компьютерное (eBook)
Интерактивное оглавление: Да
Количество страниц: 295
Описание: Описание формата SVG - масштабируемой векторной графики.
***
Примеры:
https://github.com/oreillymedia/svg-essentials-examples
добавил:
anartist
3 декабря 2016
комментировать
метки:
web-design
example
book
SVG
Graphical Web
в блог
Интересный ход. В оформлении стр. исп. SVG, с анимацией, приглушенно (opacity: 0.15;)
--
Nov. 2019 - ничего нет.
--
См. здесь, в архиве:
https://web.archive.org/web/20180224061508/http://2016.graphicalweb.org/
добавил:
anartist
26 октября 2016
комментировать
метки:
animation
web-design
inspiration
example
SVG
Bootstrap Hover Image Gallery
в блог
См. четвертый и седьмой?
добавил:
anartist
10 октября 2016
комментировать
метки:
web-design
snippet
tutorial
CSS3
bootstrap
example
Hover
Magazine Design
в блог
добавил:
anartist
22 июля 2016
комментировать
метки:
Vkontakte
article
inspiration
example
web-design
layout
design
magazine
Santorini Luxury Villas
в блог
Плоский но с тенями дизайн. Качественные фотографии.
добавил:
anartist
17 июня 2016
комментировать
метки:
web-design
example
site
Villa Alcyon, Kéa, Greece - Le Collectionist
в блог
Подсмотреть в кач. примера, какие фотографии исп. на сайте - вытянутые по горизонтали - 1:3,5.
добавил:
anartist
17 июня 2016
комментировать
метки:
inspiration
example
web-design
Image
photo
Web Design Trends 2016 | Latest Website Designing Tips and Tricks - YouTube
в блог
добавил:
anartist
12 июня 2016
комментировать
метки:
example
review
inspiration
web-design
video
Youtube
Andersson-Wise Architects | An Austin, Texas based Architecture & Design Studio
в блог
Стильный сайт
добавил:
anartist
12 июня 2016
комментировать
метки:
web-design
example
inspiration
Gumballs.ru (Гамболлс) торговые автоматы, вендинг бизнес
в блог
Лендинговидный сайт навороченный, яркий, со слайдером. Не адаптивный, не WordPress.
добавил:
anartist
21 мая 2016
комментировать
метки:
business
inspiration
example
site
landing page
web-design
сохранили
2 раза
Карамелизатор для яблок купить - Бизнес под ключ
в блог
Пример лендинга с jQuery. Яркий, длинный, глянцевый, анимированный.
добавил:
anartist
20 мая 2016
комментировать
метки:
landing page
web-design
example
site
Box/Button Hovers
в блог
Интересные эффекты.
добавил:
anartist
18 апреля 2016
комментировать
метки:
Hover
web-design
example
codepen io
snippet
buttons
css
test me
Grayscale - Free One Page Bootstrap Theme - Start Bootstrap
в блог
Page unavailable.
Demo:
http://blackrockdigital.github.io/startbootstrap-grayscale/
Github:
https://github.com/BlackrockDigital/startbootstrap-grayscale
Github download:
https://github.com/BlackrockDigital/startbootstrap-grayscale/archive/gh-pages.zip
добавил:
anartist
14 апреля 2016
комментировать
метки:
example
template
bootstrap
landing page
web-design
Bootstrap Architecture Firm - One Page Scroller example code
в блог
Bootply - тоже хороший источник для поиска примеров на Bootstrap.
***
Конкретно вот это тема - с недостатками. Меню не пристегивается нормально к верху экрана. Прокрутка не плавная.
добавил:
anartist
14 апреля 2016
комментировать
метки:
web-design
bootstrap
test me
template
download
example
code
Start Bootstrap - Free Bootstrap Themes and Templates
в блог
Кажется, это хорошее место, где собраны качественные (на первый взгляд) образцы сайтов на Bootstrap.
добавил:
anartist
14 апреля 2016
комментировать
метки:
example
web-design
bootstrap
code
templates
themes
download
Scrolling Nav - Start Bootstrap Template
в блог
Это "демо".
Также, вот короткая ссылка на "демо":
http://vk.cc/52FGoo
Вот ссылка на код:
http://startbootstrap.com/template-overviews/scrolling-nav/
GitHub:
https://github.com/BlackrockDigital/startbootstrap-scrolling-nav
***
На айпаде - отлично!
-----------------------
Меню пристегивается к верхнему краю, работает правильно (что большая редкость)!
Ход плавный, с ускорением и торможением.
На андроиде - тоже всё в порядке!
--
- ...in responsive mobile mode the menu keeps opened once you click on a menu.
Is there a way to hide it once clicked?
- Check out the jQuery on the Freelancer and Agency themes.
There is a way to collapse the menu when an item is clicked on mobile there.
--
...solution in Freelancer and Agency themes...
...try adding the code bellow to your scrolling-nav.js :
// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li a').click(function() {
$('.navbar-toggle:visible').click();
});
--
- Is there any way to have the scroll effect and also
have the nav for small screens close when clicked?
- ...the solution to this one...
<script>
$(document).ready(function () {
$(window).on('scroll', function(){
$('.navbar-ex1-collapse').collapse('hide')
});
});
</script>
Add this just before closing </body> tag, and make sure
to include necessary bootstrap.min and jQuery.
добавил:
anartist
14 апреля 2016
комментировать
метки:
example
rwd
download
bootstrap
test me
web-design
Bootstrap The Firm - One Page Scroller Template example code
в блог
добавил:
anartist
14 апреля 2016
комментировать
метки:
landing page
JavaScript
test me
css
bootstrap
example
web-design
Proper Material Design Touch Ripple Effect
в блог
добавил:
anartist
14 апреля 2016
комментировать
метки:
web-design
JavaScript
example
codepen io
Image fade + fade animation
в блог
добавил:
anartist
14 апреля 2016
комментировать
метки:
web-design
HTML
css
Image
codepen io
example
animation
Cool Navigation
в блог
LP navigation example (to test).
iPad - no,
Android - yes
Desktop - yes
добавил:
anartist
13 апреля 2016
комментировать
метки:
landing page
JavaScript
HTML
css
example
web-design
Bootstrap snippets
в блог
http://vk.cc/520GR8
- как сделать зафиксированный фон, кот. работал бы на iOS.
Fixed backgrounds with background-size: cover in iOS with Bootstrap 3.
http://vk.cc/521Hr8
(http://codepen.io/j_holtslander/pen/eJwEMg)
- 'tasty box' landing page
http://codepen.io/j_holtslander/pen/BKaXWw
- SVG image going to navbar on scroll.
Using scrollr library.
http://codepen.io/j_holtslander/pen/mVZqmm
- centering.
A demo on horizontal and vertical centering.
The title appears with animation, from below, 'bounceUp'.
http://vk.cc/52qVof
[ http://codepen.io/j_holtslander/pen/GJwMEK ]
- multiple navbars in Bootstrap 3.
http://vk.cc/52syEO
http://codepen.io/j_holtslander/pen/waQQYm
- 'Fancy fixed Bootstrap navbar.'
A navbar that starts down low and becomes fixed-top.
- Doesn't work in iPad!
http://vk.cc/52qVQ3
[ http://codepen.io/j_holtslander/pen/MwdObK ]
- navbar under the heading in Bootstrap 3.
http://vk.cc/52qM6o
[ http://codepen.io/j_holtslander/pen/pgXrWj ]
- several navbars in Bootstrap 3.
http://vk.cc/52ivUq
[ http://codepen.io/j_holtslander/pen/Jdwjpj ]
- Заголовок уходит в navbar, меняющий цвет при прокручивании. Красиво!
- Doesn't work in iPad!
http://codepen.io/j_holtslander/pen/yeEZez
- Список. Слева - миниатюра, справа - описание. Реализация на Bootstrap.
http://codepen.io/j_holtslander/pen/ZGZwJz
- Bootstrap 3 bio thumbs with social overlay on hover
http://codepen.io/redfrost/pen/mzHjb
- Bootstrap 2 moving box carousel
Движется само!
добавил:
anartist
12 апреля 2016
комментировать
метки:
web-design
JavaScript
css
codepen io
code
example
snippet
bootstrap
Bootstrap List
в блог
Слева - миниатюра, справа - описание. Качественная реализация на Bootstrap.
добавил:
anartist
12 апреля 2016
комментировать
метки:
web-design
list
codepen io
snippet
example
bootstrap
NextGEN Gallery Optimizer | The essential add-on for the NextGEN Gallery WordPress plugin.
в блог
Пример сайта. Современный в своей простоте.
добавил:
anartist
29 марта 2016
комментировать
метки:
web-design
example
Semantic UI
в блог
A framework. Bootstrap alternative. Probably better, than Bootstrap, more clean and laconic, but less popular.
A quotation taken from Quora
[https://www.quora.com/Semantic-UI-front-end-framework-Where-can-I-find-examples-of-websites-created-using-Semantic-UI]
««
Those in
basics
are literally simple examples.
Those in
beyond basics
are more complex examples,
some of which are pretty!
I personally use AngularJS so some examples here are particularly helpful.
Finally, Semantic UI's kitchen sink is a definite go-to for me:
http://semantic-ui.com/kitchen-sink.html
Basics
Tab: http://codepen.io/jwarnes/pen/BvbgF
Vertical menus on the left: http://codepen.io/mikeair/pen/MYKXPm
Cube rotation: http://codepen.io/Siyanda/pen/Xmmzbe
Nested accordeon menu: http://codepen.io/IronGeek/pen/vOejyr
Angular app to add tasks: http://codepen.io/icebob/pen/mdAFx
FAB: http://codepen.io/akranjec/pen/pvgXqV
Tabs displaying data: http://codepen.io/gabro27/pen/VLObPm
Cards with actions: http://codepen.io/chienleng/pen/gpdEGe
Semantic UI website clone: http://codepen.io/ayoungh/pen/YyKVLX
Beyond Basics:
Interactive agenda manager:
http://codepen.io/voltron2112/pen/pJXrzE
Combo dropdown: http://codepen.io/allanwhite/pen/xGMZrZ
Form for estimating water usage: http://codepen.io/jnmarcus/pen/VLOwdV
Angular wiki search: http://codepen.io/VanVlack/pen/bdYadm
Angular speech bubbles: http://codepen.io/jpidelatorre/pen/cEvLl
Angular cards: http://codepen.io/VanVlack/pen/YXrRzw
Payments page: http://codepen.io/danwolner/pen/OPJMGX
Dashboard: http://codepen.io/Jackrobscott/pen/zGMdVd
Project cards board: http://codepen.io/alexlusitania/pen/waJVLP
Twitch TV: http://codepen.io/anon/pen/QjKxaQ
A chuckle: http://codepen.io/rayrc/pen/mePJqp
My tests:
Context panel layout http://codepen.io/sean185/details/vNRpKd#stats
»»
добавил:
anartist
27 марта 2016
комментировать
метки:
semantic ui
example
snippet
web-design
alternative
bootstrap
framework
Рассчитать стоимость сайта, калькулятор стоимости сайта, стоимость сайта
в блог
Калькулятор сайта - стандартные расценки на создание сайта.
добавил:
anartist
10 марта 2016
комментировать
метки:
web-design
inspiration
example
calculator
business
SVG Visual Cheat Sheet
в блог
Обилие примеров.
*
*
*
*
*
*
*
*
*
*
*
*
добавил:
anartist
22 января 2016
комментировать
метки:
help
example
web-design
SVG
Пример анимации на SVG
в блог
добавил:
anartist
22 января 2016
комментировать
метки:
web-design
example
inspiration
animation
SVG
Архитектура и интерьеры церквей | 105 фотографий
в блог
Неправославная стилистика.
добавил:
anartist
16 января 2016
комментировать
метки:
web-design
architecture
religious
inspiration
example
Vkontakte
photos
Vertical Align with display:table
в блог
Выравнивание по вертикали.
С пом.
display: table;
and
display: table-cell;
Статья:
https://htmlacademy.ru/blog/29
добавил:
anartist
3 января 2016
комментировать
метки:
example
web-design
css
codepen io
SVG pattern element | Описание и примеры стандартных функций SVG
в блог
Как запрограммировать паттерны SVG. Примеры, подробно, понятно.
добавил:
anartist
3 января 2016
комментировать
метки:
programming
tutorial
example
web-design
SVG
Edit fiddle - JSFiddle
в блог
Действующий пример адаптивного сложного полигона SWG.
добавил:
anartist
2 января 2016
комментировать
метки:
HTML5
jsfiddle net
example
map
SVG
Психологические тренинги и курсы он-лайн. Системно-векторная психология Юрия Бурлана
в блог
Не адаптивный сайт, но всё же.
добавил:
anartist
11 декабря 2015
комментировать
метки:
web-design
example
landing page
inspiration
CSS Gradients with background-blend-mode
в блог
Фоновые рисунки, создаваемые на CSS c пом. наложения. К сож., не поддерживаются нек. браузерами. Можно посмотреть, редактировать в "codepen".
добавил:
anartist
5 декабря 2015
комментировать
метки:
CSS3
on-line
background
example
web-design
inspiration
service
CSS3 переходы (свойство transition)
в блог
добавил:
anartist
27 ноября 2015
комментировать
метки:
example
web-design
HTML5
CSS3
Pttrns | Mobile design patterns, resources and inspiration
в блог
добавил:
anartist
3 октября 2015
комментировать
метки:
example
interface
mobile
inspiration
web-design
сохранили
4 раза
Mobile Patterns
в блог
Отличная коллекция интерфейсов.
добавил:
anartist
3 октября 2015
комментировать
метки:
web-design
Android
example
inspiration
mobile
interface
сохранили
2 раза
Entropeer - We Deliver High Quality Software Solutions
в блог
Тема Kronos, бесплатная(?), но нет её на wordpress.org
Интересная тема.
Не исп. bootstrap,
слайдер, видимо хороший.
добавил:
anartist
1 июня 2015
комментировать
метки:
WordPress
inspiration
web-design
example
theme
Hover.css - коллекция CSS3 эффектов при наведении » Скрипты для сайтов
в блог
И демо вот здесь:
http://pcvector.net/uploads/demo/useful/hover.css/index.html
добавил:
anartist
25 февраля 2015
комментировать
метки:
CSS3
download
buttons
example
web-design
сохранили
3 раза
Portal page
в блог
Хор. пример вёрстки на "Bootstrap"
добавил:
anartist
12 ноября 2014
комментировать
метки:
framework
layout
example
bootstrap
web-design
rwd
Getting started · Bootstrap
в блог
Bootstrap examples. Grid, jumbotron, container, container-fluid, offset, etc.
добавил:
anartist
3 ноября 2014
комментировать
метки:
layout
rwd
web-design
example
bootstrap
сохранили
2 раза
АЙК Обнинск — ведущий городской портал Обнинска
в блог
Пример городского портала.
О нём на habrahabr.ru:
http://habrahabr.ru/post/186584/
добавил:
anartist
22 октября 2014
комментировать
метки:
example
site
web-design
WordPress
сохранили
2 раза
Концепция и методология создания городского информационно-развлекательного портала / Песочница / Хабрахабр
в блог
добавил:
anartist
21 октября 2014
комментировать
метки:
Habrahabr
example
site
web-design
business
article
ДОКТОР НОНА. Dr Nona — товары для здоровья и красоты всей семьи. интернет-магазин. Поделитесь с друзьями информацией о здоровье и красоте! ˜”*°•.❤.•°*”˜ Расскажите о том, что Вы сейчас читаете!
в блог
Сайт в общем-то банальный, не самый сложный, без открытий, пожалуй, но как пример с современными приёмчиками, продажно-буклетно-дизайнерскими трендами, такими как прозрачность, например или полупрозрачна сетка (не уверен на все сто) поверх фонов.
добавил:
anartist
3 октября 2014
комментировать
метки:
web-design
site
inspiration
example
Lumenosity - Multipurpose WordPress theme Preview - ThemeForest
в блог
Интересный ход для сайтов с белым фоном (также подойдёт неизменяемый серый, без градиента или с однородным шумом, не образующим швов на стыках блоков).
В шапке и подвале - картинка с прозрачностью. Задан код (чуть изменён):
background: hsl(200, 120%, 96%) url(images/general_elements/nav_background.png) no-repeat top center;
Получается, что заданный в коде цвет виден в прозрачном месте графического файла и таким образом этот цвет может легко быть изменён, без изменений графического файла, в котором постоянен белый непрозрачный участок.
Картинка
nav_background.png
1920x190px,
4412 bytes.
Всего четыре килобайта, с возможностью ужать и до 2 Кб (gif или png).
***
March, 2016
Something is wrong with demo.
Better see a screenshot:
http://themeforest.net/item/lumenosity-multipurpose-wordpress-theme/screenshots/4901943?index=1
добавил:
anartist
3 октября 2014
комментировать
метки:
web-design
site
example
inspiration
Пятый канал. Официальный сайт
в блог
Чётко, ясно, просто, красиво, небанально, ярко, местами тонко, с намёком на глобальность (континенты квадратиками огней с градиентом), прозрачность местами.
Не адаптивно!!!
добавил:
anartist
2 октября 2014
комментировать
метки:
TV
site
example
web-design
inspiration
SPb
сохранили
21 раз
Demos | Owl Carousel | 2.0.0-beta.2.4
в блог
*************
См. инф. внизу!
*************
Слайдер хороший, качественный, адаптивный. В версии 1 есть файлы CSS, HTML, прочий код. Исп. как база для некоторых коммерческих плагинов. Много примеров использования на все лады.
Насколько понял, бета-версия - не полный дистрибутив, т.к. представлены не все файлы, а только те, в которых сделаны изменения. В актуальной версии 1.3.3 файлов значительно больше.
***
P.S. February, 2018
https://owlcarousel2.github.io/OwlCarousel2/
добавил:
anartist
20 сентября 2014
комментировать
метки:
web-design
example
programming
code
rwd
jQuery
slider
Thumbnail Proximity Effect with jQuery and CSS3
в блог
Интересный слайдер, состоящий из множества фотографий, реагирующих на движение мышки. Игра на изменении прозрачности и размера миниатюр. См. Demo 2.
Описание и код здесь:
http://samweb.tj/samboard/n14-15_jQuery-CSS_effekty_slaydery_vsplyvayuschie_podskazki_taby_filtry_bannery_tekstovye_effekty_animirovannye_knopki_.html
добавил:
anartist
18 сентября 2014
комментировать
метки:
inspiration
web-design
example
slider
jQuery
Responsive carousel showing one image and two images partially
в блог
=================================
http://coolcarousels.frebsite.nl/c/68/
- Наподобие слайдера на сайте "Эха Москвы".
(Не проверял адаптивность и кроссплатформенность).
P.S. Нет, там не такой слайдер.
(Подсмотреть вёрстку.)
=================================
Все 78 слайдеров, галерей, каруселей на jQuery -
http://coolcarousels.frebsite.nl/
Код можно посмотреть и загрузить архивом.
=================================
http://coolcarousels.frebsite.nl/c/13/
- Mouse-over slideshow with truncated preview of second slide
- Этот принцип используется сейчас (сент. 2014) в слайдере на "Эхе Москвы".
P.S. Да не совсем так.
- Доп. информация "поднимается" снизу, закрывая (точнее, сдвигая картинку наверх).
=================================
http://coolcarousels.frebsite.nl/c/53/
- вот ещё вариант, из похожих. Изображение частично помещается на экране, крайние - обрезаны.
***
http://coolcarousels.frebsite.nl/c/52/
- с увеличением экрана, помещается больше картинок. Самопроизвольно движутся, дискретно.
***
http://coolcarousels.frebsite.nl/c/50/
- Draggable carousel that automatically completes the scrolling animation.
- Нужно тянуть картинки влево-вправо.
***
http://coolcarousels.frebsite.nl/c/43/
- Галерея интересная. Из многих фотографий, образующих "кладку".
***
http://coolcarousels.frebsite.nl/c/9/
- News Ticker. Идея реализована в теме "NewsZone" и в нек. других на "Themeforest".
***
добавил:
anartist
16 сентября 2014
комментировать
метки:
JavaScript
jQuery
web-design
DEMO
example
slider
Computers / Desktop HD, iPhone, iPad Wallpapers
в блог
Модные приёмчики, тренды в дизайне. Wallpapers, 1920px.
P.S. Март 2016 - сайт уже не работает!
добавил:
anartist
12 сентября 2014
комментировать
метки:
web-design
example
inspiration
download
1920px
wallpaper
Image
Elegantica | A Minimalistic Business Theme
в блог
Тема симпатичная - подсмотреть технические и дизайнерские решения. 43USD на themeforest.net . Nivo Slider - допустимо несколько слайдеров на одной странице? Дополнительный слайдер на главной? Уточнить.
добавил:
anartist
11 сентября 2014
комментировать
метки:
web-design
example
site
inspiration
WordPress
theme
Крупные сайты на "WordPress"
в блог
http://techcrunch.com/
- Хостинг на vip.wordpress.com .
- Flat design.
http://magazine.wsj.com/
http://online.wsj.com/public/page/magazine-index.html?mg=blogs-wsj
- Wall Street Journal
------------------------------------------------------------
See
http://vip.wordpress.com/clients/
http://www.nbcsports.com/snf-all-access-sunday-night-football
- крупный спортивный портал
http://piersmorgan.blogs.cnn.com/
- видеоблог на CNN, как часть CNN, с шапкой CNN.
http://news.blogs.cnn.com/
- новостная часть какая-то CNN, с шапкой CNN.
http://newyork.cbslocal.com/
- крупный развлекательно-новостной портал Нью-Йорка
http://washington.cbslocal.com/
- То же, Вашингтона, дизайн жуткий, но всего много.
http://ftw.usatoday.com/
- Часть "USA Today Sports", часть "USA Today"
http://www.metro.lu
- Metro International
http://observer.com/
- Дизайн слабенький, не портальный.
http://boyslife.org/
- Некрупный сайт, но интересный дизайн.
-------------------------------------------------------------
http://forumblog.org/
- World Economic Forum
- Немного простовато, но официоз. Вполне.
http://indianexpress.com/
http://indianexpress.com/business/ и проч.
- Новости, не масштабно, но, в целом, ничего.
добавил:
anartist
10 сентября 2014
комментировать
метки:
web-design
inspiration
CMS
site
WordPress
example
Замена клавиатуры на ноутбуке Asus - стоимость услуг
в блог
Шапка симпатичная, хоть и простая, ничего особенного.
добавил:
anartist
28 августа 2014
комментировать
метки:
web-design
inspiration
example
Pears
в блог
На сайте - примеры кода и тема для WP.
Автор сайта - Dan Cederholm, автор книги "Пуленепробиваемый веб-дизайн".
P.S. 2016.03.20
http://pea.rs/
- домен продается, там ничего нет.
But the project is
available on Github
:
https://github.com/simplebits/Pears
(Latest commit on Mar 9, 2012).
добавил:
anartist
23 августа 2014
комментировать
метки:
theme
WordPress
web-design
CSS3
HTML5
site
code
example
Global News | Latest & Current News - Weather, Sports & Health News
в блог
Адаптивность интересна, см. меню.
добавил:
anartist
9 августа 2014
комментировать
метки:
example
web-design
site
inspiration
rwd
How to Make a Portfolio Website -
в блог
Relatively detailed explanation. Provided you are going to purchase "Avada", a WP theme.
добавил:
anartist
24 июля 2014
комментировать
метки:
portfolio
web-design
help
inspiration
example
Proto-X
в блог
Меню оригинальное. Не Flash. HTML5?
добавил:
anartist
26 апреля 2014
комментировать
метки:
menu
web-design
example
site
Пример работы веб-студии
в блог
Инфопродукт какой-то по созданию прибыльной веб-студии. В списках тем можно посмотреть этапы становления веб-студии даже в подробностях.
добавил:
anartist
29 января 2014
комментировать
метки:
inspiration
example
web-design
business
site
1
2
3
дальше →
anartist
смотреть профиль
Любимые метки
English
Категории anartist
метки
все закладки
1_English
2_Web-Design
3_Edx
3_SEO
4_Indonesia
5_Valaam
6_Chinese
asd
Fast
Flash
Householder
Info
Jobs
Music
Philology
Sanskrit
School
Services
Soft
Teaching
Technical
temp
Video
закладки без категории
все метки
Метки категории "
2_Web-Design
"
article
cms
code
css
example
free
generator
habrahabr
help
hosting
JavaScript
jQuery
layout
mobile
on-line
plugin
programming
rwd
service
Site
tutorial
web-design
webdesign
wordpress
Реклама
: