Search the Community
Showing results for tags 'css3'.
-
Подскажите плагин на подобии wow.js, но только чтобы анимация откатывалась при обратной прокрутке. Пример http://wedesignthemes.com/themes/role/
-
Подскажите, как перекрасить scroll?
-
Разработал WEB-сайт с нуля - не использовал и не заимствовал готовые решения и вся анимация адаптирована мной под дизайн сайта. Дизайн сайта разрабатывал полностью свой и при div-ной верстке не брал готовые макеты, код сайта мой. Надеюсь на объективную оценку сайта, сейчас я его еще дорабатываю, старался сделать его масштабируемым. Адрес сайта - http://test-syte.ucoz.ru/ Прошу не начинать флуд в моей теме и все провокации будут мною игнорироваться.
-
Здравствуйте, создал сайт используя div-ную верстку и стандарт HTML5 , оцените - http://test-syte.ucoz.ru/
-
Здравствуйте! Подскажите пожалуйста, как реализовать быструю прокрутку чисел от 0 до 100 например. Можно это сделать на css3 или jquery, может уже есть готовый плагин?
-
Не могу создать элемент DIV - не прописав свойство position: absolute из-за чего не получается смаштабировать сайт: <!DOCTYPE html><html> <head> <title>Сайт по WEB-разработке</title> <meta charset="utf-8"> <link rel='stylesheet' href='../css/style.css' /><script type='text/javascript' src='../js/jquery-1.11.1.min.js'></script><script type="text/javascript" src="../js/jguery-1.4.2.min.js"></script><script type="text/javascript" src="./js/jguery-ui-1.8.2.custom.min.js"></script><script type="text/javascript" src="../js/jguery.ghindaVideoPlayer.js"></script> <script> document.createElement('figure'); document.createElement('figcaption'); </script> </head> <body> <div id="wrap-6"> </div> <div id="wrap-4"> <div id="wrap-5"> <h1>Сайт по WEB-разработке</h1> <h2>Проектирование современного дизайна сайта</h2> </div> </div> <div id="wrap"> <div id="header"> <div id="nav"> <div id="head"> <div id="logo" ><a href="#" title="logo"></a></div> </div> <ul id="links"> <li><a href="#">Home</li> <li><a href="#">Order</a></li> <li><a href="#">About as</a></li> <li><a href="#">Contact as</a></li> </ul> </div> </div> </div> <div id="wrap-2"> <form method="POST" action="index.html"> <input type="text" name="name"> <button>Text</button> </form></div> <div id="wrap-3"> <figure><img src="../images/my_4.png" align="left" alt="разработка медиа-контента"> <figcaption>HTML5-плееры для разработчика</figcaption></figure> <figure><img src="../images/my_3.png" align="left" alt="разработка медиа-контента"><figcaption>HTML5-плееры для разработчика</figcaption></figure> <figure><img src="../images/my_2.png" align="left" alt="разработка медиа-контента"><figcaption>HTML5-плееры для разработчика</figcaption></figure> </div> <div class="main"> <div id="content_sidebar"></div> <div id="content"> <div id="content_wrapper"> <section class="warning"> <img src="../images/web.png" class="voodoohead" alt="" width="49" height="92"> <header><h1><img src="../images/Microsoft.jpg" alt="WEB-дизайн" width="137" height="30"></h1></header> <p style="color:#FF0000" align="justify">Современный WEB-разработчик должен быть знакомым с HTML5/CSS3 и знать спецификацию, знать технологию Ajax. Стандартным средствомобработки успешного выполнения запроса, является указание собственной функции в параметре success. При вызове она получает данные переданные сервером, текстовый статус выполнения запроса, а так же Объект jqXHR.Начиная с jQuery-1.5, метод $.get() возвращает объект jqXHR, который помимо прочего реализует интерфейс deferred, что позволяет задавать дополнительные обработчики выполнения. Помимо стандартных для объекта deferred методов .done(), .fail() и .then(), с помощью которых можно устанавливать обработчики, в jqXHR реализованы .success(), .error() и .complete(). Это сделано для соответствия привычным названиям методов, с помощью которых устанавливаются обработчики выполнения ajax-запросов. Однако начиная с jQuery-1.8 эти три метода станут нежелательными для использования. Другими возможностями помимо серверных технологий является поддержка медиа-плагинов и работа с аудио,вот примерный список плагинов, поддерживаемых JQuery.</p></section><section> <header><center><h1><a href="./js/script.html">Разработанный HTML5-плеер</a></h1></center></header> <p style="color:#FF0000" align="left" align="top:10px;">Современный стандарт HTML5 автоматически опреджеляет код и технологию сжатия,это свойство тега Video, что позволяет оптимизировать, качесвто видео при воспроизведении, потоковое видео и подобрать потимальное качесвто, из пропускной способности канала, за счет использование кодека Vp8/vorbis, формат webm</p> <ul> <li><a href="">ссылка</a></li> <li><a href="">ссылка</a></li> <li><a href="">ссылка</a></li> <li><a href="">ссылка</a></li> <li><a href="">ссылка</a></li> <li><a href="">ссылка</a></li> <li><a href="">ссылка</a></li> <li><a href="">ссылка</a></li> <li><a href="">ссылка</a></li></ul> </section> </div> </div> </div> <header><h1>Использование JQuery</h1></header><section> <div class="main"> <div id="wrapper"><iframe src="../slider/slider.html" frameborder="0" height="343" width="610" scrolling="no" name="frame"></iframe></div> <div id="my_wrapper"><iframe src="../slider_1/slider_show.html" frameborder="0" height="250" width="350" scrolling="no" name="frame"></iframe><div id="my_wrapper_1"><p style="color:#FF0000" align="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. </p></section></div> </div> </div><div id="my_wrapper_2"><p style="color:#FF0000" align="left">При помощи Java можно реализовать вот такое слайд шоу и для этого используется DOM - объектнпая модель документа,что позволяет быстро настрайватьскрипт и стилизовать его</p> </div></div> <div id="nav_1"> <ul> <li><a href="http://www.microsoft.com/ru-ru/default.aspx">Microsoft</a></li> <li><a href="http://windows.microsoft.com/ru-ru/windows-8/meet">Windows 8.1</a></li> <li><a href="http://windows.microsoft.com/ru-ru/internet-explorer/download-ie">Internet Explorer</a></li> <li><a href="http://office.microsoft.com/ru-RU">Продукты Office</a></li> <li><a href="http://www.visualstudio.com/">Visual Studio</a></li> <li><a href="https://www.microsoft.com/ru-ru/outlook-com/">Outlook.com</li></a> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </div><div id="content_2"></div><div id="nav_content"></div> <div id="sidebar"> <ul> <li><a href="">ссылка</li></a> <li><a href="">ссылка</li></a> <li><a href="">ссылка</li></a> <li><a href="">ссылка</li></a> <li><a href="">ссылка</li></a> <li><a href="">ссылка</li></a> <li><a href="">ссылка</li></a> <li><a href="">ссылка</li></a> <li><a href="">ссылка</li></a> <li><a href="">ссылка</li></a> <li><a href="">ссылка</li></a> <li><a href="">ссылка</li></a> <li><a href="">ссылка</li></a> <li><a href="">ссылка</li></a> <li><a href="">ссылка</li></a> <li><a href="">ссылка</li></a> <li><a href="">ссылка</li></a> <li><a href="">ссылка</li></a> <li><a href="">ссылка</li></a> <li><a href="">ссылка</li></a> <li><a href="">ссылка</li></a> </ul></div><div id="my_content_4"> <div style="margin-left:24%"><div id="center"><div class="content-1"><h3>Мой плеер на Query</h3></div></div><iframe width="508" height="260" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" align="center" ; src="../my_play/index.html"></iframe></div> </div> <div id="my_block_6"> </div> <div id="my_content_7"> </div> <div id="my_content_8"> </div> <footer> <div class="footer-bg"> <div class="copyright"> <p><strong>Учебный сайт «Как поймать льва в пустыне»</strong></p> <p>© Влад Мержевич</p> </div> </div></footer> </body></html>
-
У меня есть скрипт:<script language="Javascript">/* * ghindaVideoPlayer - jQuery plugin 1.0.0 * * Copyright (c) 2010 Cristian-Ionut Colceriu * * www.ghinda.net * contact@ghinda.net * */(function($) {// plugin definition$.fn.gVideo = function(options) {// build main options before element iterationvar defaults = {theme: '',childtheme: ''};var options = $.extend(defaults, options);// iterate and reformat each matched elementreturn this.each(function() {var $gVideo = $(this);//create html structure//main wrappervar $video_wrap = $('<div></div>').addClass('ghinda-video-player').addClass(options.theme).addClass(options.childtheme);//controls wrapervar $video_controls = $('<div class="ghinda-video-controls"><a class="ghinda-video-play" title="Play/Pause"></a><div class="ghinda-video-seek"></div><div class="ghinda-video-timer">00:00</div><div class="ghinda-volume-box"><div class="ghinda-volume-slider"></div><a class="ghinda-volume-button" title="Mute/Unmute"></a></div></div>');$gVideo.wrap($video_wrap);$gVideo.after($video_controls);//get new elementsvar $video_container = $gVideo.parent('.ghinda-video-player');var $video_controls = $('.ghinda-video-controls', $video_container);var $ghinda_play_btn = $('.ghinda-video-play', $video_container);var $ghinda_video_seek = $('.ghinda-video-seek', $video_container);var $ghinda_video_timer = $('.ghinda-video-timer', $video_container);var $ghinda_volume = $('.ghinda-volume-slider', $video_container);var $ghinda_volume_btn = $('.ghinda-volume-button', $video_container);$video_controls.hide(); // keep the controls hiddenvar gPlay = function() {if($gVideo.attr('paused') == false) {$gVideo[0].pause();} else {$gVideo[0].play();}};$ghinda_play_btn.click(gPlay);$gVideo.click(gPlay);$gVideo.bind('play', function() {$ghinda_play_btn.addClass('ghinda-paused-button');});$gVideo.bind('pause', function() {$ghinda_play_btn.removeClass('ghinda-paused-button');});$gVideo.bind('ended', function() {$ghinda_play_btn.removeClass('ghinda-paused-button');});var seeksliding;var createSeek = function() {if($gVideo.attr('readyState')) {var video_duration = $gVideo.attr('duration');$ghinda_video_seek.slider({value: 0,step: 0.01,orientation: "horizontal",range: "min",max: video_duration,animate: true,slide: function(){seeksliding = true;},stop:function(e,ui){seeksliding = false;$gVideo.attr("currentTime",ui.value);}});$video_controls.show();} else {setTimeout(createSeek, 150);}};createSeek();var gTimeFormat=function(seconds){var m=Math.floor(seconds/60)<10?"0"+Math.floor(seconds/60):Math.floor(seconds/60);var s=Math.floor(seconds-(m*60))<10?"0"+Math.floor(seconds-(m*60)):Math.floor(seconds-(m*60));return m+":"+s;};var seekUpdate = function() {var currenttime = $gVideo.attr('currentTime');if(!seeksliding) $ghinda_video_seek.slider('value', currenttime);$ghinda_video_timer.text(gTimeFormat(currenttime));};$gVideo.bind('timeupdate', seekUpdate);var video_volume = 1;$ghinda_volume.slider({value: 1,orientation: "vertical",range: "min",max: 1,step: 0.05,animate: true,slide:function(e,ui){$gVideo.attr('muted',false);video_volume = ui.value;$gVideo.attr('volume',ui.value);}});var muteVolume = function() {if($gVideo.attr('muted')==true) {$gVideo.attr('muted', false);$ghinda_volume.slider('value', video_volume);$ghinda_volume_btn.removeClass('ghinda-volume-mute');} else {$gVideo.attr('muted', true);$ghinda_volume.slider('value', '0');$ghinda_volume_btn.addClass('ghinda-volume-mute');};};$ghinda_volume_btn.click(muteVolume);$gVideo.removeAttr('controls');});};//// plugin defaults//$.fn.gVideo.defaults = {};})(jQuery);</script> Это java-скрипт для вызова API - им я создаю члены-переменные класса и оборачиваю их в контейнер класса ghindaVidePlayer -для управления своим видео -проигрывателем, а вот стили CSS: /* * ghindaVideoPlayer - jQuery plugin 1.0.0 * * Copyright (c) 2010 Cristian-Ionut Colceriu * * ghindaVideoPlayer.css * Styles for the ghindaVideoPlayer * *//* base styles */.ghinda-video-player {}.ghinda-video-play, .ghinda-volume-button {cursor: pointer;}.ghinda-video-timer {cursor: default;}/* Start of simpledark default theme */.ghinda-video-player.simpledark {float: left;position: relative;padding: 10px;border: 5px solid #61625d;font-family: Arial, Helvetica, sans-serif;-moz-border-radius: 5px; /* FF1+ */-webkit-border-radius: 5px; /* Saf3+, Chrome */border-radius: 5px; /* Opera 10.5, IE 9 */background: #000000;background-image: -moz-linear-gradient(top, #313131, #000000); /* FF3.6 */background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #313131),color-stop(1, #000000)); /* Saf4+, Chrome */box-shadow: inset 0 15px 35px #535353;}.ghinda-video-player.simpledark .ghinda-video-controls {position: relative;padding-top: 5px;float: left;clear: both;width: 100%;}.ghinda-video-player.simpledark .ghinda-video-play, .ghinda-video-player.simpledark .ghinda-video-seek, .ghinda-video-player.simpledark .ghinda-volume-box, .ghinda-video-timer {float: left;}/* play, pause */.ghinda-video-player.simpledark .ghinda-video-play {display: block;width: 22px;height: 22px;margin-right: 15px;background: url(images/play-icon.png) no-repeat;opacity: 0.7;-moz-transition: all 0.2s ease-in-out; /* Firefox */-webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */-o-transition: all 0.2s ease-in-out; /* Opera */transition: all 0.2s ease-in-out; }.ghinda-video-player.simpledark .ghinda-paused-button {background: url(images/pause-icon.png) no-repeat;}.ghinda-video-player.simpledark video {float: left;}.ghinda-video-player.simpledark .ghinda-video-play:hover { opacity: 1;}/* seek */.ghinda-video-player.simpledark .ghinda-video-seek {position:relative;width: 360px;height: 10px;margin-top: 5px;border: 1px solid #494949;-moz-border-radius:15px;-webkit-border-radius:15px;border-radius:15px;background: #535353;background-image: -moz-linear-gradient(top, #535353, #333333);background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #535353),color-stop(1, #333333));box-shadow: inset 0 -3px 3px #333333;}.ghinda-video-player.simpledark .ghinda-video-seek .ui-slider-handle {width: 15px;height: 15px;border: 1px solid #333;top: -4px;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;background: #e6e6e6;background-image: -moz-linear-gradient(top, #e6e6e6, #d5d5d5);background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #e6e6e6),color-stop(1, #d5d5d5));box-shadow: inset 0 -3px 3px #d5d5d5;}.ghinda-video-player.simpledark .ghinda-video-seek .ui-slider-handle.ui-state-hover {background: #fff;}.ghinda-video-player.simpledark .ghinda-video-seek .ui-slider-range {-moz-border-radius:15px;-webkit-border-radius:15px;border-radius:15px;background: #4cbae8;background-image: -moz-linear-gradient(top, #4cbae8, #39a2ce);background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #4cbae8),color-stop(1, #39a2ce));box-shadow: inset 0 -3px 3px #39a2ce;}/* timer */.ghinda-video-player.simpledark .ghinda-video-timer {margin-top: 5px;margin-left: 10px;color: #999;font-size: 0.7em;font-weight: bold;}/* volume */.ghinda-video-player.simpledark .ghinda-volume-box {position: absolute;bottom: 0px;right: 0px;overflow: hidden;width: 20px;height: 30px;color: #fff;padding: 0px 10px;-moz-transition: all 0.1s ease-in-out; /* Firefox */-webkit-transition: all 0.1s ease-in-out; /* Safari and Chrome */-o-transition: all 0.2s ease-in-out; /* Opera */transition: all 0.1s ease-in-out; }.ghinda-video-player.simpledark .ghinda-volume-box:hover {height: 135px;padding-top: 5px;}.ghinda-video-player.simpledark .ghinda-volume-box:hover .ghinda-volume-slider {position: relative;visibility: visible;opacity: 1;}.ghinda-video-player.simpledark .ghinda-volume-slider {position: relative;height: 100px;width: 7px;left: 4px;visiblity: hidden;opacity: 0;border: 1px solid #444;-moz-border-radius:15px;-webkit-border-radius:15px;border-radius:15px;background: #535353;background-image: -moz-linear-gradient(top, #535353, #333333);background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #535353),color-stop(1, #333333));box-shadow: inset 0 3px 3px #333333;-moz-transition: all 0.1s ease-in-out; /* Firefox */-webkit-transition: all 0.1s ease-in-out; /* Safari and Chrome */-o-transition: all 0.1s ease-in-out; /* Opera */transition: all 0.1s ease-in-out; }.ghinda-video-player.simpledark .ghinda-volume-slider .ui-slider-handle {width: 12px;height: 12px;left: -4px;margin-bottom:-0.6em;margin-left:0;border: 1px solid #333;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;background: #e6e6e6;background-image: -moz-linear-gradient(top, #e6e6e6, #d5d5d5);background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #e6e6e6),color-stop(1, #d5d5d5));box-shadow: inset 0 3px 3px #d5d5d5;}.ghinda-video-player.simpledark .ghinda-volume-slider .ui-slider-handle.ui-state-hover {background: #fff;}.ghinda-video-player.simpledark .ghinda-volume-slider .ui-slider-range {-moz-border-radius:15px;-webkit-border-radius:15px;border-radius:15px;background: #e6e6e6;background-image: -moz-linear-gradient(top, #e6e6e6, #d5d5d5);background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #e6e6e6),color-stop(1, #d5d5d5));box-shadow: inset 0 3px 3px #d5d5d5;}/* volume button */.ghinda-video-player.simpledark .ghinda-volume-button {position: absolute;bottom: 0px;display: block;width: 22px;height: 22px;background: url(images/volume-full-icon.png) no-repeat;text-indent: -9999px;opacity: 0.8;}.ghinda-video-player.simpledark .ghinda-volume-button:hover {opacity: 1;}.ghinda-video-player.simpledark .ghinda-volume-mute {background: url(images/volume-mute-icon.png) no-repeat;}/* Start of smalldark child theme */.ghinda-video-player.smalldark {padding: 0px;}.ghinda-video-player.smalldark video:hover + .ghinda-video-controls {visibility: visible;opacity: 0.7;}.ghinda-video-player.smalldark .ghinda-video-controls:hover {visibility: visible;opacity: 0.7;}.ghinda-video-player.smalldark .ghinda-video-controls {position: absolute;top: 150px;left: 80px;width: 320px;padding: 10px;border: 1px solid #2E2E2E;-moz-border-radius: 5px; /* FF1+ */-webkit-border-radius: 5px; /* Saf3+, Chrome */border-radius: 5px; /* Opera 10.5, IE 9 */background: #000000;background-image: -moz-linear-gradient(top, #313131, #000000); /* FF3.6 */background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #313131),color-stop(1, #000000)); /* Saf4+, Chrome */opacity: 0;visibility: hidden;box-shadow: inset 0 15px 35px #535353;-moz-transition: all 0.1s ease-in-out; /* Firefox */-webkit-transition: all 0.1s ease-in-out; /* Safari and Chrome */-o-transition: all 0.1s ease-in-out; /* Opera */transition: all 0.1s ease-in-out; }.ghinda-video-player.smalldark .ghinda-video-seek {width: 200px;}.ghinda-video-player.smalldark .ghinda-volume-box {bottom: 10px;}.ghinda-video-player.smalldark .ghinda-volume-box:hover {height: 85px;}.ghinda-video-player.smalldark .ghinda-volume-slider {height: 50px;}/* needed jquery ui styles * using these, we don't depend on jQuery UI's stylsheet */.ui-slider-handle {position: absolute;z-index: 2;display: block;;cursor: default;outline: none;}.ui-slider-range {display:block;width:100%;height:100%;left:0;bottom: 0;border:0 none;position:absolute;z-index:1;}Я их использую для стилизации своего проигрывателя. А вот иcходник самого проигрывателя: <video width=320 height=240 controls class="ghinda-video-player.simpledark"></video><button data-file=video1.webm>Video 1</button><button data-file=video2.webm>Video 2</button><button data-file=video3.webm>Video 3</button><script>/* use global variable for ease */var v = document.getElementById('videoPlayer');/* grab all buttons and attach click events */var b = document.getElementsByTagName('button');for(i = 0; i<b.length; i++) {b[i].addEventListener('click',swapVideo,true);}function swapVideo(e) {/* change the video src attribute based on the data-file attribute of the pressed button */v.src = e.target.getAttribute('data-file');v.load();}</script></html></body>И у меня не получается его стилизовать - звук только проигрывает, я новичок в WEB-разработке, что я делаю не так-?.Материал взял из статьи - http://www.webmaster...and-jquery.html
-
Добрый день! Меня зовут Павел Кулигин, и я ищу верстальщика к себе в команду. Я работаю в качестве ведущего дизайнера над проектами нескольких компаний: 2Тбанк, Wildberries, FE Credit. Мне нужен человек, который будет верстать макеты сайтов. Пример: http://www.pavelkuligin.ru/LK2/ Профессиональные требования: html5, css3, js (на уровне: оживить калькулятор, доработать плагин, реализовать несложные анимации), знание или желание изучить фреймворки и препроцессоры будет для вас плюсом. (я не сторонник фреймворков и в своей работе мы стараемся сделать собственный css-фреймворк для каждого проекта). Личные качества: высокий уровень ответственности, стремление сделать свою работу лучше других, быстрая скорость работы, понимание принципа: верстальщик тоже дизайнер ( ) Оплата по-часовая (250-300 рублей) В связи с такими ценами мне нужен начинающий верстальщик, готовый расти быстрыми темпами. В будущем уровень зарплат будет увеличен.
-
У меня есть форма, к полям которой применяется box-shadow. Так вот во всех браузерах, кроме Chrome, это св-во работает. Версия Chrome: 35.0.1916.153 form-1 input[type="text"] { width: 240px; height: 46px; background: #dcebff; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.7); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.7); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.7); border: none; color: #6dabff; font-family: 'pf_din_text_comp_promedium', sans-serif; font-size: 1.176em; outline: medium none; padding-left: 2px; } слева - Chrome, справа - Firefox.
-
День добрый! Наверное, нет верстальщика, который хоть раз не опробовал готовый фреймворк. Чаще всего таковым выступает twitter bootstrap. Собственно, вопрос к форумчанам, которые его использовали и видели реализацию навигационного меню: возможно ли сделать его полностью на css, не прибегая к js-скриптам? Если ответ положительный, будьте так добры, пните на соответствующие темы/блоги... хоть что-то.
-
При добавлении новых пунктов меню, форма поиска должна постепенно уменьшается, как на картинке, при слишком большом кол-ве я уже сверну менюшку , как в бутстрапе при малом разрешении будет. Проблема лишь в том что я не могу "догнать" даже в теории как оно должно будет выглядеть, просто подскажите на теории, как такое можно реализовать, спасибо =)
-
Всем привет! Народ кто уже верстал на иврите, подскажите пожалуйста, с какими "подводными камнями" вы сталкивались? Чего нового придется учитывать? Спасибо =)
-
Здравствуйте. Можно ли сделать такую тень на чистом html5+css3, или тут без изображения никак? Спасибо.
-
Прошу оценить верстку мини landing page . http://vacations.besaba.com/ Пишите что не так. Ошибки.
-
Оцените вёрстку страницы сайта, пожалуйста... http://building.esy.es/ Интересно Ваше мнение о css-файле. Да, и не обращайте внимание на количество рекламы Ну дизайн такой(не мой , конечно) Спасибо.
-
Аллоха, люди! Есть 3 состояния кнопки, у каждой из которых border и background градиент. Собственно, как это чудо можно реализовать придерживаясь следующих требований: вся магия должна происходить исключительно на стороне css.в html не должно быть вложенности.стили должны одинаково корректно применяться к любым html тегам.можно использовать любые свойства css3, главное что бы в не поддерживаемых браузерах срабатывала заглушка типа сплошного цвета вместо градиента.P.S. искренняя благодарность и восхищение человеком который реально способен решить данную задачу. Спасибо.
-
Здравствуйте! Ищу дополнительных сотрудников, занимаюсь только версткой, без cms. Больше года опыта. Ставка 3$ час , Landing Page – от 1000 руб. Работа нужна постоянная, около 20-30 часов, на неделю. Мой сайт: eforce.com.ua. почта: fikretkurtiev@gmail.com. Спасибо.
-
Здравствуйте. Верстаю такую страницу. Хочу сделать красивое появление и затухание при помощи transition для иконки у блока раскрывающихся новостей. http://prntscr.com/3lqfvi Имею такой css: i { opacity: 0; -webkit-transition: opacity @durationStd ease-in-out; -moz-transition: opacity @durationStd ease-in-out; -ms-transition: opacity @durationStd ease-in-out; -o-transition: opacity @durationStd ease-in-out; transition: opacity @durationStd ease-in-out; }И появление происходит как надо (плавно). Но вот при закрытие затухания не происходит, а просто изменяется свойство и элемент мигом исчезает. Подскажите в чем может быть проблема.
-
Всем привет, собственно вот PSD http://file-up.net/big_5b90a8840b4b78d55d20140521153125.jpg , а вот вёрстка http://agencyyy.besaba.com/ Жду...
-
Оцените, плиз, вёрстку макета. Не дизайн ( шаблон я скачал где то в сети, кажись psd-мания), а именно вёрстку. http://sample.besaba.com/ Спасибо
-
Здравствуйте! Есть задание разместить на сайте некоторый рекламный текст, который сразу бы бросался в глаза. Я думаю это сделать с помощью каких-либо эффектов, с помощью CSS3. Я нашла подобный пример, но он только для webkit: http://css-tricks.com/examples/SlideToUnlock/ Подскажите, пожалуйста, какими свойствами можно воспользоваться? Думаю, что поддержка старыми браузерами не обязательна.
-
Здравствуйте! Возникла проблема к которой я не могу найти решения. Если делать верстку с прижатым футером и линейным градиентом для body, то он обрезается если контент выходит за видимую часть страницы. Т.е как только для html добавляем height: 100%, градиент обрезается. Если не задавать то не обрезается, но и прижать футер уже невозможно никаким способом из моего опыта. Кто-нибудь сталкивался с данной проблемкой?
-
Решила почитать про эффекты css, давно скачала книгу "pro css3 animation". Ну вот руки дошли. Помимо других вещей которые происходят с трансформированным элементом, для меня было неожиданностью узнать, что: ДОМ остается без изменений. значения свойств трансформированного элемента такие как offsetWidth так же не меняются. место занимаемое элементом сохраняется. До этого не задумывалась что происходит с трансформированным элементом, а теперь после того как вижу, что действительно свойства позиции блока в документе не меняются - запуталась- что же происходит с блоком который трансформируется? То есть он в ДОМе такой же прямоугольник, несмотря на то какой он стал, а трансформированные области как нибудь регистрируются? а что если я хочу как то программно повлиять на эти области? http://codepen.io/amelice/pen/vgEFC это до трансформации http://i.imgur.com/rHJSZq7.png и после такой же. была тема http://htmlforum.ru/index.php?showtopic=48683#entry325636 по этому поводу в книге написано, что: The Webkit CSS3 Transform Aliasing Issue Early versions of Chrome and Safari (up to version 5.1) contain a rendering bug: when transforming some elements, the browsers will not antialias the edges of rotated or skewed HTML content, resulting in so-called “jaggies” or “staircasing” on the edges of images, as shown in Figure 2-4. There are various techniques for getting around this bug : • Apply a 1-pixel white border around the element. • Apply webkit-backface-visibility: hidden; to the element. • Add another transformation to the element, such as -webkit-transform: rotate(−10deg) translateZ(0);. Попробовала применить эти советы на том же примере: 1. http://jsfiddle.net/fHBg9/5/ 2. http://jsfiddle.net/fHBg9/4/ 3. http://jsfiddle.net/fHBg9/6/ Мне кажется первый совет устарел ибо не помогает, а справился хорошо самый последний.
-
Битый час не могу получить путного решения на голом css, подскажите как будет сделать правильно? Задача: При наведении на .information появляется надпись "кнопка". Нужно чтобы она оставалась и не пропадала при фокусе на textarea. Код: http://jsfiddle.net/GCkrC/
-
Здравствуйте. Как сделать подобную форму на css/css3?
