Search the Community

Достаточно недавно начал изучать CSS-HTML, считаю что в дальнейшем когда выйдет CSS4 и т.д. Возможно многое уже можно будет сделать без JS, на данный момент пока получается вот так. http://codepen.io/Maseone/pen/AgnJo - Собственно DEMO!

Здравствуйте, дали макет и в нем вот такой слайдер — http://img542.images...2/4426/v11v.jpg . Как вы заметили изображения слайдера необычной формы, У меня были идеи: Сохранить их в png с такими "вырезами", но они бы много весили по сравнению с jpg; Сделать блоки, которые бы перекрывали картинку, но фон не однородный: Cделать это с помощью css-свойства mask-image, но оно поддерживается только в Webkitax. Остановился на SVG clip-path. Вот что из этого вышло: http://fiddle.jshell...ody/dHjXn/show/ Не получается отобразить картинки в IE8 и ниже. Может кто-нибудь подскажет как с эти бороться? Можно даже их сделать прямоугольной формы, главное чтобы отображались

Здравствуйте уважаемые форумчане. Подскажите, пожалуйста, есть слайдер у него есть желтая подложка под серым фоном (web programming, mobile programming, DESIGN), смена слайдов происходит после наведения курсора на стрелки перетаскивание мышкой влево-вправо, и также при нажатии. Вот такой функционал http://attractgroup.com/ru/index У меня задача сделать такой же, только не юзать код из этого сайта. Может кто-то сталкивался с подобным в инете? Я гуглил, но готовый не находил, а клепать с 2х скриптов не лучший вариант, наверняка есть подобный, просто может с другой подложклой, это уже не беда, в стилях можно переделать. З.Ы. пока что сделан вариант: при нажатии меняются, а подложки нет. З.Ы.Ы. если что пишите в аську - 450236182, скайп - konstantinskiy, с меня печеньки

практикую верстку. сделал слайдер с помощью jQuery, он вроде работает. Но правую сторону слайдера, там где текст, при передвижении вправо выбрасывает вниз. При достижении границы родительского блока опускается вниз Тут наверное что-то с css не докручено. помогите, уже не знаю что делать, много чего перепробовал вот ссылка

Здравйствуйте ! у меня возникла проблема ! Я вставил слайдер и картинки все хорошо по задумке нужно кнопки вставить под слайдер ! а сейчас кнопки навигации на слайдере ! я вписал z-index: -5 кнопки встали нормально только вот они потеряли ссылки ! незнаю как исправить чтоб и кпонки были снизу и ссылками они были! вот код слайдера /* * jQuery FlexSlider v1.0 (Release) * http://flex.madebymufffin.com * * Copyright 2011, Tyler Smith * Free to use under the MIT license. * http://www.opensourc...mit-license.php */ /* Необходимые стили для FlexSlider *********************************/ .flexslider { height: 302px; width: 901px; margin: 0; padding: 0; position: relative; } .flexslider .slides li {display: none; list-style-type:none;} /* Скрываем слайды доя загрузки JS. Избегаем дергания изображений */ .flexslider .slides img { height: 302px; width: 901px; display: block; position: relative; right: 0; } /* Тема по умолчанию для FlexSlider *********************************/ .flexslider {} .flexslider .slides li {position: relative;} /* Стиль заголовков */ .flex-caption {width: 849px; padding: 3%; position: absolute; right: 0; bottom: -20px; background: rgba(0,0,0,.3); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); font-size: 15px; line-height: 18px; overflow:hidden; } /* Навигация */ .flex-direction-nav li a { height: 94px; width: 94px; display: block; } .flex-direction-nav li a.next { background: url(theme/right.png) no-repeat 0 0; position:absolute; top: 100px; left: 860px; } .flex-direction-nav li a.prev { background: url(theme/left.png) no-repeat 0 0; position:absolute; top: 100px; right:860px; z-index:-5; } .flex-direction-nav { list-style-type:none;} вот код style.css /* Theme Name: plus Theme URI: Description: r plus Version: 1.0 Author: Author URI: */ /* Css Document */ * {padding: 0; margin: 0} body { background: #fff; font-family: Arial, Verdana, sans-serif } /*——————————-header———————————*/ .header { background: #fff; width: 901px; margin: 0 auto } .header-top { height: 108px; width: auto } .logo { height: 85px; width: 221px; float: left; padding: 8px 0 17px 0 } .contacts { height: 108px; width: 635px; float: right } .contacts-first span{ font-family: "Arial black", sans-serif; font-size: 11px; font-weight: bold; padding: 19px 40px 0 0; color: #1a1a1a; float: left } .contacts-first span h1{ font-family: arial, regular, sans-serif; font-weight: normal; font-size: 40px; color: #808080 } .contacts-last { position: relative; top:16px; left:35px } .contacts-last ul li { list-style-type:none; line-height: 15px } .contacts-last ul li span { font-family: arial, sans-serif; font-size: 11px } .contacts-last ul li span a{ font-family: arial, sans-serif; font-size: 11px; color:#009245; text-decoration:underline } .contacts-last ul li span a:hover{ font-family: arial, sans-serif; font-size: 11px; color:#009245; text-decoration: none; } .contacts-last ul li a { font-family: arial, sans-serif; font-size: 18px; color: #009245; list-style-type: none; line-height: 20px; text-decoration:none } /*——————————-menu-nav——————————--*/ .menu { background: red; height: 39px; padding: 2px 0 0 0; margin: 0 0 20px 0 } .menu ul li { float:left; list-style-type:none; padding: 0 10px } /*——————————menu-end———————————*/ .slider { width: 901px; height: 302px; position:relative; margin: 0 auto; background: white; -webkit-box-shadow:0 1px 4px #818181; -moz-box-shadow:0 1px 4px #818181; box-shadow:0 1px 4px #818181; } .slider:before, .slider:after { content:""; position:absolute; z-index:-2; } .slider:before { top:10px; bottom:10px; left:0; right:0; -webkit-box-shadow:0 0 15px rgba(0,0,0,0.6); -moz-box-shadow:0 0 15px rgba(0,0,0,0.6); box-shadow:0 0 15px rgba(0,0,0,0.6); -moz-border-radius:10px / 100px; border-radius:10px / 100px; } .slider-fon { position:absolute; top:240px; background-color:white; width:100%; height:62px; opacity:0.8; filter:alpha(opacity=80); } .slider-text { position:absolute; top:243px; left:19px; width:100%; color:black; text-align:center; padding: 9px 0 }

Здравйствуйте ! у меня возникла проблема ! Я вставил слайдер и картинки все хорошо по задумке нужно кнопки вставить под слайдер ! а сейчас кнопки навигации на слайдере ! я вписал z-index: -5 кнопки встали нормально только вот они потеряли ссылки ! незнаю как исправить чтоб и кпонки были снизу и ссылками они были! вот код слайдера /* * jQuery FlexSlider v1.0 (Release) * http://flex.madebymufffin.com * * Copyright 2011, Tyler Smith * Free to use under the MIT license. * http://www.opensourc...mit-license.php */ /* Необходимые стили для FlexSlider *********************************/ .flexslider { height: 302px; width: 901px; margin: 0; padding: 0; position: relative; } .flexslider .slides li {display: none; list-style-type:none;} /* Скрываем слайды доя загрузки JS. Избегаем дергания изображений */ .flexslider .slides img { height: 302px; width: 901px; display: block; position: relative; right: 0; } /* Тема по умолчанию для FlexSlider *********************************/ .flexslider {} .flexslider .slides li {position: relative;} /* Стиль заголовков */ .flex-caption {width: 849px; padding: 3%; position: absolute; right: 0; bottom: -20px; background: rgba(0,0,0,.3); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); font-size: 15px; line-height: 18px; overflow:hidden; } /* Навигация */ .flex-direction-nav li a { height: 94px; width: 94px; display: block; } .flex-direction-nav li a.next { background: url(theme/right.png) no-repeat 0 0; position:absolute; top: 100px; left: 860px; } .flex-direction-nav li a.prev { background: url(theme/left.png) no-repeat 0 0; position:absolute; top: 100px; right:860px; z-index:-5; } .flex-direction-nav { list-style-type:none;} вот код style.css /* Theme Name: plus Theme URI: Description: r plus Version: 1.0 Author: Author URI: */ /* Css Document */ * {padding: 0; margin: 0} body { background: #fff; font-family: Arial, Verdana, sans-serif } /*——————————-header———————————*/ .header { background: #fff; width: 901px; margin: 0 auto } .header-top { height: 108px; width: auto } .logo { height: 85px; width: 221px; float: left; padding: 8px 0 17px 0 } .contacts { height: 108px; width: 635px; float: right } .contacts-first span{ font-family: "Arial black", sans-serif; font-size: 11px; font-weight: bold; padding: 19px 40px 0 0; color: #1a1a1a; float: left } .contacts-first span h1{ font-family: arial, regular, sans-serif; font-weight: normal; font-size: 40px; color: #808080 } .contacts-last { position: relative; top:16px; left:35px } .contacts-last ul li { list-style-type:none; line-height: 15px } .contacts-last ul li span { font-family: arial, sans-serif; font-size: 11px } .contacts-last ul li span a{ font-family: arial, sans-serif; font-size: 11px; color:#009245; text-decoration:underline } .contacts-last ul li span a:hover{ font-family: arial, sans-serif; font-size: 11px; color:#009245; text-decoration: none; } .contacts-last ul li a { font-family: arial, sans-serif; font-size: 18px; color: #009245; list-style-type: none; line-height: 20px; text-decoration:none } /*——————————-menu-nav——————————--*/ .menu { background: red; height: 39px; padding: 2px 0 0 0; margin: 0 0 20px 0 } .menu ul li { float:left; list-style-type:none; padding: 0 10px } /*——————————menu-end———————————*/ .slider { width: 901px; height: 302px; position:relative; margin: 0 auto; background: white; -webkit-box-shadow:0 1px 4px #818181; -moz-box-shadow:0 1px 4px #818181; box-shadow:0 1px 4px #818181; } .slider:before, .slider:after { content:""; position:absolute; z-index:-2; } .slider:before { top:10px; bottom:10px; left:0; right:0; -webkit-box-shadow:0 0 15px rgba(0,0,0,0.6); -moz-box-shadow:0 0 15px rgba(0,0,0,0.6); box-shadow:0 0 15px rgba(0,0,0,0.6); -moz-border-radius:10px / 100px; border-radius:10px / 100px; } .slider-fon { position:absolute; top:240px; background-color:white; width:100%; height:62px; opacity:0.8; filter:alpha(opacity=80); } .slider-text { position:absolute; top:243px; left:19px; width:100%; color:black; text-align:center; padding: 9px 0 }

Добрый день! Не подскажите, какой существует слайдер с возможностью показа такого "Изображение 5 из 320"? Буду благодарен за наводку.