Привет Всем. Решила добавить еще парочку CSS оформление, для ярлыков. Источник тот же.
Оформление ярлыка, при наведение движется
/*-----Custom Labels Cloud widget by www.bloggertrix.com----*/.label-size{margin:0 2px 6px 0;padding: 3px;text-transform: uppercase;border: solid 1px #C6C6C6;border-radius: 3px;float:left;text-decoration:none;font-size:10px;color:#666;}.label-size:hover {border:1px solid #6BB5FF;text-decoration: none;-moz-transition: all 0.5s ease-out;-o-transition: all 0.5s ease-out;-webkit-transition: all 0.5s ease-out;-ms-transition: all 0.5s ease-out;transition: all 0.5s ease-out;-moz-transform: rotate(7deg);-o-transform: rotate(7deg);-webkit-transform: rotate(7deg);-ms-transform: rotate(7deg);transform: rotate(7deg);filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');zoom: 1;}.label-size a {text-transform: uppercase;float:left;text-decoration: none;}.label-size a:hover {text-decoration: none;}
Оформление, просто в рамке
#Label1 a{color:#333;padding:2px 8px;line-height:24px;margin:0 2px;background:#eee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEgGB6JuaMhnGdlfgSyumqWBPLWhGEVG8ZP5QeVtuxzqgcPXkuPKThwjHfgQNnp0gb1O24xp0MhMeqKPaUOZZ7ulPikNjOuuTiFA4Ns2W4y7F07TkrAXrSsVxdz8OIxdWXW_1rB90WRWQ/s1600/bricks.png) center center repeat-x;border:1px solid #ddd;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;font-size:10px !important;text-decoration:none;}#Label1 a:hover{color:#666;background:none #fff;text-decoration:none;}
#Label1 a{float:left;height:18px;line-height:18px;position:relative;font-size:12px;margin-bottom: 9px;margin-left:10px;padding:5px;background: rgb(69,72,77); /* Old browsers */background: -moz-linear-gradient(top, rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,72,77,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* IE10+ */background: linear-gradient(to bottom, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */color:#fff;text-decoration:none;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}#Label1 a:hover{fbackground: rgb(73,192,240); /* Old browsers */background: -moz-linear-gradient(top, rgba(73,192,240,1) 0%, rgba(44,175,227,1) 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(73,192,240,1)), color-stop(100%,rgba(44,175,227,1))); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top, rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top, rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* IE10+ */background: linear-gradient(to bottom, rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#49c0f0', endColorstr='#2cafe3',GradientType=0 ); /* IE6-9 */}
Выбираете понравившиеся оформление и вставляете пред ]]>
0 коммент. :