Какой рейтинг вас больше интересует?
|
Главная / Главные темы / Тэг «ccc»
Модальное окно с фреймом 2013-11-21 03:04:31
Модальное окно с фреймом,может кому пригодится Здесь ничего сложного,стили ,скрипт и сам код ...
+ развернуть текст сохранённая копия
Модальное окно с фреймом,может кому пригодится Здесь ничего сложного,стили ,скрипт и сам код окошка. Код: <style>
.modal-window {
display: none;
position: absolute;
z-index: 100;
background: #eee;
padding: 5px;
border-radius: 5px;
box-shadow: 2px 2px 5px #000000;
left: 30%;
top: 30px;
}
.modal-window-close {
position: absolute;
font-size: 10px;
cursor: pointer;
right: 4px;
top: 4px;
}
.modal-window-title {
text-align: center;
}
.modal-window-content {
padding: 5px;
}
</style>
<script type="text/javascript">
function showModal(self) {
var modal = document.getElementById('modalWindow');
var iframe = modal.getElementsByTagName('iframe')[0];
iframe.src = self.href;
modal.style.display = 'block';
return false;
}
</script>
<div id="modalWindow" class="modal-window">
<div class="modal-window-close" onclick="this.parentNode.style.display='none';">Закрыть</div>
<div class="modal-window-title">Я модальное окно)</div>
<div class="modal-window-content">
<iframe src="about:blank" frameborder="0"></iframe>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam facilisis lorem ac dapibus ullamcorper. Pellentesque vestibulum felis eu odio bibendum, <a href="http://ngcmshak.ru/dialogi-overlay-i-lightbox/modalnoe-okno-s-freimom.html" onclick="return showModal(this);">ткни сюда</a>, ut viverra leo vestibulum. Sed a ipsum posuere, egestas mauris vel, porta magna. Mauris malesuada ipsum in lectus auctor, vel venenatis turpis facilisis. Mauris at eros libero. Curabitur eleifend lorem vel feugiat dignissim. Nam non molestie tortor.</p>
<p> Nullam arcu ligula, lacinia et diam ut, euismod congue metus. Nam erat enim, hendrerit at luctus in, vehicula quis turpis. Nulla id quam at nibh lacinia sollicitudin eget dictum massa. Donec ac arcu in dolor scelerisque tempor vel in justo. Sed elit orci, luctus vel magna a, dapibus ultricies nisl. Curabitur nunc lacus, ullamcorper nec libero at, fringilla luctus eros. Mauris faucibus eu risus id interdum. Duis ante quam, volutpat et tristique sed, tristique non nibh.</p> Посмотреть можете скопировав код и вставив в панель для проверки скриптов, справа.
Тэги: css,, lightbox,, overlay, диалоги,
Очень красивая анимация кнопки на CSS3 2013-11-21 00:46:54
Очень красивая анимация кнопки на CSS3,подойдет для красочных и стильных дизайнов. 1. ...
+ развернуть текст сохранённая копия
Очень красивая анимация кнопки на CSS3,подойдет для красочных и стильных дизайнов. 1.Скачиваем исходник [isnt-logged] Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам 1319601850.zip (44.9 Kb)[/is-logged] .
2.Сам код кнопки простой это ссылка
Код: <a class="button" href="#">Я кнопка</a> 3.Ну а теперь стиль
Код: .button {
display: block;
width: 5em;
padding: 30px 40px;
text-align: center;
font-family: Arial, sans-serif;
font-size: 18px;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 0px #000;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
-o-border-radius: 25px;
border-radius: 25px;
-moz-box-shadow: 2px 2px 10px #000;
-webkit-box-shadow: 2px 2px 10px #000;
-o-box-shadow: 2px 2px 10px #000;
box-shadow: 2px 2px 10px #000;
background: url(images/background.png) no-repeat center -100px;
}Это простенький вариант,в исходнике есть еще пара примеров
Тэги: css, иконки,, кнопки
Вывод в “шапке” блога на WordPress разных объектов 2013-11-19 13:25:58
Здравствуйте читатели блога LiWiHelp.ru! Только по одному названию этой статьи не все смогут сразу ...
+ развернуть текст сохранённая копия
Здравствуйте читатели блога LiWiHelp.ru! Только по одному названию этой статьи не все смогут сразу понять, о чём я хочу сегодня рассказать. Для этого нужно прочитать хотя бы несколько абзацев текста ниже. Все блоггеры, которые поставили своей целью сделать вывод какого-нибудь объекта (текста или изображения) только на главной странице блога WordPress, с лёгкостью найдут в Интернете […] 
Тэги: cms, css, wordpress, блога, разработка, сайтов, шапка
[Из песочницы] Как сверстать веб-страницу. Часть 1 2013-11-18 07:03:34
Уважаемый читатель, этой статьей я открываю цикл статей, посвященных вёрстке.
В первой части ...
+ развернуть текст сохранённая копия
Уважаемый читатель, этой статьей я открываю цикл статей, посвященных вёрстке.
В первой части будет описано, как это сделать с помощью стандартных средств на чистом HTML и CSS. В последующих частях рассмотрим как сделать тоже самое, но с помощью современных фреймворков и CMS.
Часть 1. Верстка стандартными средствами
Преимущество данной верстки состоит в том, что код получается более «чистым», а значит быстрее загружается и легче изменяется под специфические нужды. Недостаток такой верстки заключается в том, что она требует значительно больше времени, чем при использовании фреймворков.
Итак, давайте приступим. В качестве нашего подопытного мы возьмем бесплатный psd шаблон Corporate Blue от студии Pcklaboratory.
Читать дальше →
Тэги: css, html, html-верстка, tutorial, веб-разработка
Адаптивная верстка 2013-11-17 14:09:13
Весь интернет гудит о адаптивных сайтах, все хотят, чтобы их сайт хорошо отображался на разных ...
+ развернуть текст сохранённая копия
Весь интернет гудит о адаптивных сайтах, все хотят, чтобы их сайт хорошо отображался на разных устройствах. В этой статье раскажу как создавать очень простой шаблон «универсального» сайта. Будем писать наш код на HTML5, поэтому можно использовать новые элементы, такие как header, footer и т. д. Лучше подключить плагин html5 shiv для корректного отображения сайта в IE и файл reset.css, чтобы сбросить ненужные стили. 1.Скачать исходник [isnt-logged] Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам demo_template.zip (5.38 Kb)[/is-logged].
2.Сначала создадем блок «wrapper», секцию для хэдера с названием сайта, слоганом и навигацией. Блок с основным содержимым включает в себя раздел со статьями, раздел с последними новостями, раздел с дополнительной информацией и футер. Мы не создаём ничего особенного, просто делаем структуру страницы и добавляем названия классов и идентификаторов css, чтобы затем подключить стили.
Код: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Onextrapixel - Responsive Web Design Template</title>
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="media-queries.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:700,400,400italic,700italic' rel='stylesheet' type='text/css'>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body id="home">
<div id="wrapper">
<header>
<h1><a href="index.html">Site Title</a></h1>
<h2>Tagline <span>&</span> Some clever comment about the company</h2>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Portfolio</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
<div class="clearfix"></div>
</nav>
</header>
<section id="main-content">
<div id="featured">
<h3>Featured Article :</h3>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br/> <a href="#">Continue Reading →</a></p>
</div> <!-- END Featured -->
<hr/>
<div id="latest">
<section class="left-col">
<h3>Latest Articles :</h3><br/>
<h4><a href="#">Blog 1</a></h4>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. <a href="#">Continue Reading →</a></p>
<h4><a href="#">Blog 2</a></h4>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. <a href="#">Continue Reading →</a></p>
<h4><a href="#">Blog 3</a></h4>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. <a href="#">Continue Reading →</a></p>
</section> <!-- END Left Column -->
<aside class="sidebar">
<h4><a href="#">Archives</a></h4>
<ul>
<li><a href="#">July 2010</a></li>
<li><a href="#">August 2010</a></li>
<li><a href="#">September 2010</a></li>
</ul>
<br/>
<h4><a href="#">Categories</a></h4>
<ul>
<li><a href="#">Articles</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Roundups</a></li>
</ul>
<br/>
<h4><a href="#">Social</a></h4>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">RSS</a></li>
<li><a href="#">Google+</a></li>
</ul>
</aside>
</div> <!-- END Latest -->
<div class="clearfix"></div>
<hr/>
<div id="about">
<h3>About</h3>
<p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus.<br/><br/>
Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
</div>
</section>
<hr/>
<footer>
<p>© 2011 - Responsive Website Template</p>
</footer>
</div> <!-- END Wrapper -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</body>
</html> Наша разметка должна выглядеть так:
3.Добавим CSS
Как вы заметили, в разделе head подключили шрифт Droid serif из Google Web Fonts API. Теперь установим общие стили и стили для типографики
Код: body { background: #F9F9F9; color: #222; font-family: 'Droid Serif', serif; font-size: 16px; } Давайте добавим стили для #wrapper, установим ему резиновую ширину 90% и максимальную ширину (значение max-width).
Добавим остальные стили, чтобы сделать нашу страницу более привлекательной для посетителей. В основной секции у нас две колонки, помните, что любая ширина должна задаваться в процентах, чтобы быть резиновой. Свойство CSS transitions, которое здесь прописано, не будет работать, пока мы не подключим media queries.
Код: h1 { font-size: 90px;
font-family: 'Droid Serif', serif;
line-height: 75px; padding: 10px;
-webkit-transition-property: font-size;
-moz-transition-property: font-size;
transition-property: font-size;
-webkit-transition-duration: 0.5s, 0.5s;
-moz-transition-duration: 0.5s, 0.5s;
transition-duration: 0.5s, 0.5s;
-webkit-transition-timing function: linear, ease-in;
-moz-transition-timing function: linear, ease-in;
transition-timing function: linear, ease-in;
}
h1 a:hover { text-decoration: none; color: #27B3CF; }
h2 { font-family: 'Helvetica'; font-size: 18px; padding: 10px;
-webkit-transition-property: font-size;
-moz-transition-property: font-size;
transition-property: font-size;
-webkit-transition-duration: 0.5s, 0.5s;
-moz-transition-duration: 0.5s, 0.5s;
transition-duration: 0.5s, 0.5s;
-webkit-transition-timing function: linear, ease-in;
-moz-transition-timing function: linear, ease-in;
transition-timing function: linear, ease-in;
}
h3 { font-family: 'Droid Serif', serif; font-size: 30px; }
h4 { font-family: 'Droid Serif', serif; padding: 3px; margin: 5px 0 0 0; }
h4 a { text-decoration: underline; }
h4 a:hover { text-decoration: none; }
nav { background: #222; padding: 0; margin: 10px 0;}
nav a { color: #F9F9F9; display: block; float: left; padding: 10px; }
nav a:visited { color: #f9f9f9; }
nav a:hover { text-decoration: none; background: #27B3CF; }
nav a:active { position: relative; top: 0; }
.left-col { width: 70%; float: left; }
.sidebar { width: 20%; float: right; margin-bottom: 10px;
-webkit-transition-property: width;
-moz-transition-property: width;
transition-property: width;
-webkit-transition-duration: 0.5s, 0.5s;
-moz-transition-duration: 0.5s, 0.5s;
transition-duration: 0.5s, 0.5s;
-webkit-transition-timing function: linear, ease-in;
-moz-transition-timing function: linear, ease-in;
transition-timing function: linear, ease-in;
}
#featured { padding: 20px; }
#latest { padding: 20px; }
#about { padding: 20px; }
p { padding: 0 5px 0 5px; }
ul { list-style: none; }
ul li { margin: 0 5px; }
footer { padding: 5px; }Теперь наша страница должна выглядеть таким образом:
4.Подключим к HTML-документу ещё один CSS-файл с названием media-queries.css. В него поместим свойства для различных размеров экранов устройств, это будут свойства для заголовков h1 , h2 и для колонок.
Код: @media screen and (max-width: 478px) {
h1 { font-size: 70px; padding: 1px; }
h2 { font-size: 13px; padding: 1px; }
body { font-size: 13px; }
}
@media screen and (max-width: 740px) {
.left-col { width: 100%; }
.sidebar { width: 100%; }
}
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}Версия для iPhone
Так наш сайт должен выглядеть на iPhone.
Благодаря свойству CSS transitions, которое добавили в файл CSS, название сайта, слоган и другие текстовые элементы будут изменять свой размер плавно, без резких «скачков».
Это не единственный способ создания адаптивного дизайна, а всего лишь вариант автора статьи.
Тэги: css,, html5,
Главная / Главные темы / Тэг «ccc»
|
Взлеты Топ 5
Падения Топ 5
|
