xhtml & css » css

Новый .clearfix хак

pulev — Tue, 10 May 2011 20:16:34 +0000

Хозяйке на заметку.

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}
 
.cf:after {
    clear:both;
}
 
/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

Источник: http://nicolasgallagher.com/micro-clearfix-hack/

CSS Tools: Reset CSS v. 2

pulev — Thu, 27 Jan 2011 18:07:13 +0000

В новой версии CSS-reset, предназначенного для обнуления начальных условий при вёрстке под разные браузеры, произошли некоторые изменения:

Больше не сбрасывается тег font, свойство outline и фон не выставляется в прозрачный.
Всем сбрасываемым элементам выставляется font: inherit.
Добавлены в сброс article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video.
Убраны правила для ins и del.
Добавлено правило для элементов HTML5:

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

Скачать

Создание «пузыря»

pulev — Fri, 26 Nov 2010 08:40:37 +0000

Создать «пузырь» без картинок и лишнего кода очень просто...

Решение очень простое... использует псевдо-элемент :after и работает во всех нормальных браузерах...

Все что нам понадобиться это div и немного CSS:

.speech-bubble
  {
   width: 200px;
   padding: 10px;
   background: #404040;
   color: #fff;
   font: normal 12px "Segoe UI", Arial, Sans-serif;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px;
  }
  .speech-bubble:after
  {
   content: "";
   border: solid 10px transparent; /* set all borders to 10 pixels width */
   border-top-color: #404040; /* the callout */
   border-bottom: 0; /* we do not need the bottom border in this case */
   width: 0;
   height: 0;
   overflow: hidden;
   display: block;
   position: relative;
   bottom: -20px; /* border-width of the :after element + padding of the root element */
   margin: auto;
  }

Источник: http://acidmartin.wordpress.com/2010/11/25/creating-a-speech-bubble-with-css3-and-without-additional-markup/

Фиксим «корявый» background

pulev — Sun, 22 Aug 2010 06:52:49 +0000

Ух уж эти метросексуалы дизайна и вэб дизайна!

Ранее я уже поднимал тему background'а.

Все наверно замечали как бэк налазит на края блоков со скругленными краями... вам тоже на нравится это?

Решение есть!

.back {
  -webkit-background-clip: padding-box; 
  -moz-background-clip: padding-box; 
}

Если использовать сокращенную форму для других свойств фона, то это свойство должно быть после него.

Больше о доступных значений для свойства здесь.

Источник: http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed

CSS3 Background Images

pulev — Fri, 30 Jul 2010 09:10:17 +0000

Сделать изображение фоном без javascript на весь фон? Легко!

Есть методы с js... я ранее писал про скейлинг картинок, но есть и css метод, хоть и не везде работает!

.back {
  background-image: url(back.jpg);
  background-repeat:no-repeat;
  background-position:center center;
  -o-background-size: 100% 100%, auto;
  -moz-background-size: 100% 100%, auto;
  -webkit-background-size: 100% 100%, auto;
  background-size: 100% 100%, auto;
}

Данный метод будет работать в последних Firefox, Safari, Chrome и Opera, все остальные браузеры будут видеть реальное изображение в фоне по центру блока.

Источник: http://www.cssplay.co.uk/boxes/css3-background.html

Простой jQuery Tooltip Plugin

pulev — Mon, 19 Jul 2010 08:16:38 +0000

Наткнулся на очень простой и удобный плагин для подсказок... jQuery Tooltip Plugin...

Часто бывает необходимость выводить подсказку... стандартные способы не так хороши как хотелось бы... выход есть:

<link rel="stylesheet" type="text/css" href="colortip-1.0/colortip-1.0-jquery.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript" src="colortip-1.0/colortip-1.0-jquery.js"></script>
<script type="text/javascript" src="script.js"></script>

Готово.

Источник: http://tutorialzine.com/2010/07/colortips-jquery-tooltip-plugin/

Закругленные уголки у картинок с помощью jQuery

pulev — Mon, 12 Jul 2010 13:24:53 +0000

Недавно была необходимость сделать круглые уголки у картинки... повозился... отказался от идеи не найдя хорошего решения...

Случайно нашел оч. хороший способ...

Хочется вот такой красоты после применения border-radius и box-shadow:

А получаем:

Есть небольшой трюк для фикса:

<span class="rounded-img" style="background: url(img/thumb1.jpg) no-repeat center center; width: 70px; height: 70px;"> 
<img src="img/thumb1.jpg" style="opacity: 0;" /> 
</span>

Вокруг картинки добавляем и на него вешаем background саму картинку, а оригинал скрываем: opacity: 0.

Для упрощения стоит воспользоваться jQuery:

<img src="img/thumb1.jpg" class="rounded-img" /> 
<img src="img/thumb2.gif" class="rounded-img2" />

Стили:

/* rounded image styles */
.rounded-img {
	display: inline-block;
	border: solid 1px #000;
	overflow: hidden;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.rounded-img2 {
	display: inline-block;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
	-moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
	box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
}

Javascript:


<script type="text/javascript">
$(document).ready(function(){
 
  $(".rounded-img, .rounded-img2").load(function() {
    $(this).wrap(function(){
      return '+ $(this).attr('class') + '" style="background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
    });
    $(this).css("opacity","0");
  });
 
});
script>

Результат:

Источник: http://www.webdesignerwall.com/tutorials/css3-rounded-image-with-jquery/

Выпадающее окно логина как на Twitter

pulev — Wed, 14 Apr 2010 11:07:27 +0000

Форма логина есть почти на каждом сайте...

Сделать ее еще красивее и удобнее очень просто.

Сама форма:

<div id="container">
  <div id="topnav" class="topnav"> Have an account? <a href="login" class="signin"><span>Sign in</span></a> </div>
  <fieldset id="signin_menu">
    <form method="post" id="signin" action="https://twitter.com/sessions">
      <label for="username">Username or email</label>
      <input id="username" name="username" value="" title="username" tabindex="4" type="text"/>
 
      <p>
        <label for="password">Password</label>
        <input id="password" name="password" value="" title="password" tabindex="5" type="password"/>
      </p>
      <p class="remember">
        <input id="signin_submit" value="Sign in" tabindex="6" type="submit"/>
        <input id="remember" name="remember_me" value="1" tabindex="7" type="checkbox"/>
        <label for="remember">Remember me</label>
      </p>
      <p class="forgot"> <a href="#" id="resend_password_link">Forgot your password?</a> </p>
      <p class="forgot-username"> <a id=forgot_username_link 
title="If you remember your password, try logging in with your email" 
href="#">Forgot your username?</a> </p>
    </form>
  </fieldset>
</div>

Оформление:

#container {
    width:780px;
    margin:0 auto;
    position: relative;
}
 
#content {
    width:520px;
    min-height:500px;
}
a:link, a:visited {
    color:#27b;
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}
a img {
    border-width:0;
}
#topnav {
    padding:10px 0px 12px;
    font-size:11px;
    line-height:23px;
    text-align:right;
}
#topnav a.signin {
    background:#88bbd4;
    padding:4px 6px 6px;
    text-decoration:none;
    font-weight:bold;
    color:#fff;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    *background:transparent url("images/signin-nav-bg-ie.png") no-repeat 0 0;
    *padding:4px 12px 6px;
}
#topnav a.signin:hover {
    background:#59B;
    *background:transparent url("images/signin-nav-bg-hover-ie.png") no-repeat 0 0;
    *padding:4px 12px 6px;
}
#topnav a.signin, #topnav a.signin:hover {
    *background-position:0 3px!important;
}
 
a.signin {
    position:relative;
    margin-left:3px;
}
a.signin span {
    background-image:url("images/toggle_down_light.png");
    background-repeat:no-repeat;
    background-position:100% 50%;
    padding:4px 16px 6px 0;
}
#topnav a.menu-open {
    background:#ddeef6!important;
    color:#666!important;
    outline:none;
}
#small_signup {
    display:inline;
    float:none;
    line-height:23px;
    margin:25px 0 0;
    width:170px;
}
a.signin.menu-open span {
    background-image:url("images/toggle_up_dark.png");
    color:#789;
}

#signin_menu {
    -moz-border-radius-topleft:5px;
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -webkit-border-top-left-radius:5px;
    -webkit-border-bottom-left-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    display:none;
    background-color:#ddeef6;
    position:absolute;
    width:210px;
    z-index:100;
    border:1px transparent;
    text-align:left;
    padding:12px;
    top: 24.5px; 
    right: 0px; 
    margin-top:5px;
    margin-right: 0px;
    *margin-right: -1px;
    color:#789;
    font-size:11px;
}
 
#signin_menu input[type=text], #signin_menu input[type=password] {
    display:block;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border:1px solid #ACE;
    font-size:13px;
    margin:0 0 5px;
    padding:5px;
    width:203px;
}
#signin_menu p {
    margin:0;
}
#signin_menu a {
    color:#6AC;
}
#signin_menu label {
    font-weight:normal;
}
#signin_menu p.remember {
    padding:10px 0;
}
#signin_menu p.forgot, #signin_menu p.complete {
    clear:both;
    margin:5px 0;
}
#signin_menu p a {
    color:#27B!important;
}
#signin_submit {
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    background:#39d url('images/bg-btn-blue.png') repeat-x scroll 0 0;
    border:1px solid #39D;
    color:#fff;
    text-shadow:0 -1px 0 #39d;
    padding:4px 10px 5px;
    font-size:11px;
    margin:0 5px 0 0;
    font-weight:bold;
}
#signin_submit::-moz-focus-inner {
padding:0;
border:0;
}
#signin_submit:hover, #signin_submit:focus {
    background-position:0 -5px;
    cursor:pointer;
}

Волшебство:


<script type="text/javascript">
        $(document).ready(function() {
 
            $(".signin").click(function(e) {
                e.preventDefault();
                $("fieldset#signin_menu").toggle();
                $(".signin").toggleClass("menu-open");
            });
 
            $("fieldset#signin_menu").mouseup(function() {
                return false
            });
            $(document).mouseup(function(e) {
                if($(e.target).parent("a.signin").length==0) {
                    $(".signin").removeClass("menu-open");
                    $("fieldset#signin_menu").hide();
                }
            });            
 
        });
script>

Источник: http://aext.net/

Футер который всегда внизу

pulev — Mon, 25 May 2009 12:03:36 +0000

Часто стоит задача сделать так чтоб футер был всегда внизу страницы.

Решение очень простое...

html, body {height: 100%;}
 
#wrap {min-height: 100%;}
 
#main {overflow:auto;
	padding-bottom: 150px;}  /* must be same height as the footer */
 
#footer {position: relative;
	margin-top: -150px; /* negative value of footer height */
	height: 150px;
	clear:both;} 
 
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}

Для любимо ИЕ добавляем следующий код:

Ну и сама страница:

 
<div id="wrap">
	<div id="main">
 
	</div>
</div>
 
<div id="footer">
 
</div>

Источник: http://www.cssstickyfooter.com/

Самые ожидаемые CSS3 новшества

pulev — Tue, 05 May 2009 19:35:13 +0000

Около 7000 человек приняло участие в опросе о самых ожидаемых фишках CSS3...

Border Radius (22.0%, 1,541 голосов)
Multiple Backgrounds (22.0%, 1,523 Votes)
@font-face (21.0%, 1,424 Votes)
Animations / Transitions (12.0%, 818 Votes)
Gradients (8.0%, 535 Votes)
Box Shadow (4.0%, 271 Votes)
RGBa (3.0%, 234 Votes)
Text Shadow (2.0%, 140 Votes)
Other (2.0%, 168 Votes)

Как по мне, то результаты предсказуемы!

Источник: http://css-tricks.com/poll-results-css3-features