tag:blogger.com,1999:blog-86699547404889543722024-03-13T07:35:15.601-07:00V V B блогВикаhttp://www.blogger.com/profile/11579231753656787833noreply@blogger.comBlogger6125tag:blogger.com,1999:blog-8669954740488954372.post-44775072539395393902015-09-03T23:48:00.000-07:002019-01-04T05:19:59.596-08:00винтаж<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<style>
.vintage img {
padding:0;
float:left;
}
.vintage {
border:5px solid #000;
position: relative;
float: left; /* Change to right if you want the images to be aligned to the right */
margin-right: 20px;
margin-bottom: 20px;
}
.vintage:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,255,0, 0.5); /* sepia */
background-image:url(https://lh3.googleusercontent.com/jj1YitRwMhc2YD8y_Su0Kf6Tb19OwFVYexPQfd_fECEFUEl7qXj4br7ACHiS1TLL-rHPPkFWI8F8gypFT-Sd6ZJIHqcJQdkZf4uo7xJoQUzIIpOA0VCbJe9rygPduDBRvRZVscpVi6hJZ0ptc-REdhNVfsIuvJMzvNRNZVOODnMnGQ0SCtOoufYAVyHB9TBtrJC0evPWsivueiF4nNWcVjMR9asp1qrDwitxTMc1CQNS1YVaruFkMIVttAJkuP6SR-XsIy-Fx_6CFy831r2XvsDThRccPGoL7xw4M-kABLngPXAnh_Ib0_4sjg7Ule_4Z-wqSrYl5V1AJYOeyFGWPh-M7boFzzN9-BzNZVpgp9zNt-uPvGVfMfxu5D0WvVgRpfPDQUu3h0TfpNB8wt_tWm5qclan4K4EJn3gUkAdb-mK6sWkuYfbXp3cJEtg1yjitLIW04rW1t5e76vgk_TRWbqGNPf06OLp4WBJ-b7zbqP1bsiWm9E2WL72iDvaqcp6stZ63548uu9aPi4aYt0IFhE=w334-h401-no );
background-size: cover;
box-shadow: inset 0 0 50px #000, inset 0 0 50px #000, inset 0 0 50px #000;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all .1s;
}
.vintage:hover:before {
background: none;
box-shadow:none;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all .1s;
}</style>
<br />
<div class="vintage" style="clear: both;">
<img border="0" height="400" src="https://lh3.googleusercontent.com/jj1YitRwMhc2YD8y_Su0Kf6Tb19OwFVYexPQfd_fECEFUEl7qXj4br7ACHiS1TLL-rHPPkFWI8F8gypFT-Sd6ZJIHqcJQdkZf4uo7xJoQUzIIpOA0VCbJe9rygPduDBRvRZVscpVi6hJZ0ptc-REdhNVfsIuvJMzvNRNZVOODnMnGQ0SCtOoufYAVyHB9TBtrJC0evPWsivueiF4nNWcVjMR9asp1qrDwitxTMc1CQNS1YVaruFkMIVttAJkuP6SR-XsIy-Fx_6CFy831r2XvsDThRccPGoL7xw4M-kABLngPXAnh_Ib0_4sjg7Ule_4Z-wqSrYl5V1AJYOeyFGWPh-M7boFzzN9-BzNZVpgp9zNt-uPvGVfMfxu5D0WvVgRpfPDQUu3h0TfpNB8wt_tWm5qclan4K4EJn3gUkAdb-mK6sWkuYfbXp3cJEtg1yjitLIW04rW1t5e76vgk_TRWbqGNPf06OLp4WBJ-b7zbqP1bsiWm9E2WL72iDvaqcp6stZ63548uu9aPi4aYt0IFhE=w334-h401-no " width="300" />
</div>
</div>
Викаhttp://www.blogger.com/profile/11579231753656787833noreply@blogger.com6tag:blogger.com,1999:blog-8669954740488954372.post-84550501852552432242015-08-16T22:34:00.003-07:002015-08-16T22:34:53.999-07:00<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<br /></div>
<pre><code>.container {
background:transparent url('адрес картинки ') no-repeat 50% 0;
background-size:100% auto;
height:0;
padding-bottom:105.180%;
box-sizing:content-box;
position:relative;
}
.container-content {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
overflow:auto;
}
</code></pre>
</div>
Викаhttp://www.blogger.com/profile/11579231753656787833noreply@blogger.com0tag:blogger.com,1999:blog-8669954740488954372.post-34103359380672873802015-08-09T21:52:00.003-07:002015-08-09T22:01:53.837-07:00<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<br /></div>
<a href="http://my-testoblog.blogspot.ru/" onclick="newMyWindow(this.href); return false;">открыть окно по центру </a>
<script>
function newMyWindow(e) {
var h = 500,
w = 500;
window.open(e, '', 'scrollbars=1,height='+Math.min(h, screen.availHeight)+',width='+Math.min(w, screen.availWidth)+',left='+Math.max(0, (screen.availWidth - w)/2)+',top='+Math.max(0, (screen.availHeight - h)/2));
}
</script><br />
<br />
<br /></div>
<a href="http://www.shpargalochki.ru/2015/08/kak--sdelat-fonovoe-izobrazhenie-CSS..html" onclick="window.open(' http://www.shpargalochki.ru/2015/08/kak--sdelat-fonovoe-izobrazhenie-CSS..html ','newwin','top=15, left=20,width=400, height=300')">сюда</a>
</div>
</div>
Викаhttp://www.blogger.com/profile/11579231753656787833noreply@blogger.com1tag:blogger.com,1999:blog-8669954740488954372.post-62205198808811964002015-05-11T23:22:00.002-07:002018-05-26T05:54:31.585-07:00эффект подчёркивания <div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<br /></div>
<div class="slid ">
вот такой подчёркнутый текст.<br />
<br />
посмотрите <a href="http://www.shpargalochki.ru/">здесь</a> </div>
<style>.slid {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
.slid:after {
content: '';
display: block;
position: absolute;
left: 0;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.slid:hover:after {
width: 100%;
background: #2B0486 ;
}</style></div>
Викаhttp://www.blogger.com/profile/11579231753656787833noreply@blogger.com0tag:blogger.com,1999:blog-8669954740488954372.post-23638543947644903252015-05-10T06:14:00.001-07:002019-02-05T01:13:02.284-08:00блок подписки<div dir="ltr" style="text-align: left;" trbidi="on">
Вот такой красивый блок подписки можно установить в сайдбаре блога или в конце сообщения. Иконки соц.сетей настраиваются по вашему желанию.<br />
<br />
<style>
.social-connect-widget{background:#D7D7D7;border:1px solid #E7E6DE;padding:10px; border-radius:5px; -moz-border-radius:5px;
-webkit-transition:all .6s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .6s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
.social-connect-widget:hover{border:1px solid #CBCBC2;background:#FFFEF9;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);}
.social-connect-widget a{text-decoration:none;font-weight:bold;font-size:14px;font-family:Arial,Helvetica,Sans-serif;color:#4B4D4E}
.social-connect-widget a:hover{text-decoration:underline;color:#F77C04}
.social-connect-widget img{vertical-align:middle;margin-right:5px;height:32px;width:32;}
</style>
<br />
<div class="social-connect-widget" style="margin-bottom: 10px; margin-top: 0px;">
<img alt="RSS Feed" src="http://s017.radikal.ru/i403/1505/c9/499418cfb549.png " /><a href="http://feeds.feedburner.com/USERNAME">Подписка на RSS</a>
</div>
<div class="social-connect-widget" style="margin-bottom: 10px;">
<img alt=" Twitter!" src="http://s42.radikal.ru/i097/1505/99/98169f217f7d.png " title="Follow Us on Twitter!" /><a href="http://twitter.com/USERNAME">присоединяйтесь в Twitter!</a>
</div>
<div class="social-connect-widget" style="margin-bottom: 10px;">
<img alt="Facebook " src="http://s020.radikal.ru/i703/1505/41/46f45d456847.png " /><a href="https://www.facebook.com/viktoria.barad">присоединяйтесь в Facebook!</a>
<br />
<br />
<br />
<b><span style="color: #cc0000; font-size: x-large;">🎁</span></b><span style="color: #cc0000; font-size: x-large;"><b>😙</b></span></div>
</div>
Викаhttp://www.blogger.com/profile/11579231753656787833noreply@blogger.com14tag:blogger.com,1999:blog-8669954740488954372.post-18986856321252271872015-05-08T07:27:00.000-07:002015-09-16T07:16:57.093-07:00Картинки в рамке с красивой подписью<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
Чтобы придать такой вид изображению в блоге нам понадобиться небольшой код CSS. Посмотреть этот код и как реализовать всё это читаем <a href="http://www.shpargalochki.ru/2015/02/krasivaja-nadpis-na-kartinke.html?showComment=1431096861582#comment-c6192531390549567494" rel="nofollow">здесь</a>.<br />
<br />
1. Картинка в рамке без подписи.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQrCbQDJh0qNPOUvjraol6CL3dUU7rYGrm-CL1WVlPpJxAJthrCnQ" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="170" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQrCbQDJh0qNPOUvjraol6CL3dUU7rYGrm-CL1WVlPpJxAJthrCnQ" width="200" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><br /></td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: left;">
2, Картинка в рамке с подписью.</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQrCbQDJh0qNPOUvjraol6CL3dUU7rYGrm-CL1WVlPpJxAJthrCnQ" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="170" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQrCbQDJh0qNPOUvjraol6CL3dUU7rYGrm-CL1WVlPpJxAJthrCnQ" width="200" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Добавьте подпись</td></tr>
</tbody></table>
<br />
<br />
<br /></div>
<style>table.tr-caption-container {
border: 5px solid #dc143c;
border-radius: 10px;
padding: 10px 10px 10px 10px;
}
table.tr-caption-container img {
width: 90,5%;
border: 2px solid #dc143c;
}
td.tr-caption {
color:#0000ff;
font-size: 20px;
font-style: italic;
text-transform:uppercase ;}
</style></div>
Викаhttp://www.blogger.com/profile/11579231753656787833noreply@blogger.com5