tag:blogger.com,1999:blog-32596948442697417742024-03-04T23:43:27.837-08:00экспериментВикаhttp://www.blogger.com/profile/11579231753656787833noreply@blogger.comBlogger12125tag:blogger.com,1999:blog-3259694844269741774.post-18786853708650194042021-01-20T22:39:00.000-08:002021-01-21T05:44:02.184-08: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">
<br />
<style type="text/css">
.preview {
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
.preview img{
border: 1px solid white;
margin: 0 5px 5px 0;
}
.preview :hover{
background-color: transparent;
}
.preview :hover img{
border: 1px solid blue;
}
. preview span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.preview span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.preview :hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
</style>
<br />
<a class="preview" href="http://s020.radikal.ru/i716/1602/e6/e5b23de02bd7.png" title="самурай"><img alt="самурай" src="http://s020.radikal.ru/i716/1602/e6/e5b23de02bd7.png " width="150" /></a>
<a class="preview" href="http://s020.radikal.ru/i711/1502/b4/8000d9324307.jpg" title="пятачок"><img alt="пятачок" src=" http://s020.radikal.ru/i711/1502/b4/8000d9324307.jpg" width="150" /></a>
<br />
<a class="preview" href="http://s020.radikal.ru/i716/1602/e6/e5b23de02bd7.png" title="самурай"><img alt="самурай" src="http://s020.radikal.ru/i716/1602/e6/e5b23de02bd7.png " width="150" /></a>
<a class="preview" href="http://s020.radikal.ru/i711/1502/b4/8000d9324307.jpg" title="пятачок"><img alt="пятачок" src=" http://s020.radikal.ru/i711/1502/b4/8000d9324307.jpg" width="150" /></a>
</div>
</div>
</div>
Викаhttp://www.blogger.com/profile/11579231753656787833noreply@blogger.com2tag:blogger.com,1999:blog-3259694844269741774.post-30544809965936276942020-06-25T08:42:00.002-07:002020-06-25T08:42:45.958-07:00картинка<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbXMJ-hzMibZgq60zyZfC4zVXbK_PJeAw1B1Gihimh6Ce-xZchmdJePNvUJ5oIHS8QfH08qlSge-SIiI6_MOixRm95Bu6X_w9KbFjKKH6BYRpblxWmIwqoAIzWfkkdnff2S9WnkNHFofs/s1600/%25D0%25BF%25D1%2582%25D0%25B8%25D1%2587%25D0%25BA%25D0%25B0.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="401" data-original-width="600" height="213" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbXMJ-hzMibZgq60zyZfC4zVXbK_PJeAw1B1Gihimh6Ce-xZchmdJePNvUJ5oIHS8QfH08qlSge-SIiI6_MOixRm95Bu6X_w9KbFjKKH6BYRpblxWmIwqoAIzWfkkdnff2S9WnkNHFofs/s320/%25D0%25BF%25D1%2582%25D0%25B8%25D1%2587%25D0%25BA%25D0%25B0.png" width="320" /></a></div>
<br /></div>
Викаhttp://www.blogger.com/profile/11579231753656787833noreply@blogger.com0tag:blogger.com,1999:blog-3259694844269741774.post-59603657771123181802020-06-14T21:33:00.005-07:002020-06-15T01:01:34.791-07:00проба<div dir="ltr" style="text-align: left;" trbidi="on">
пробуем вставить ролик с компьютера
</div>
<div dir="ltr" style="text-align: left;" trbidi="on"><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.blogger.com/video.g?token=AD6v5dw6kXVQ2_uLKYb74ow4ftEtaUrAF1aquyHAtKCYhjyeTkarGMyCSCpraUsRYjjyP8PsIzoXpOSdQOrAQjK2Ww' class='b-hbp-video b-uploaded' frameborder='0'></iframe>
</div>
<div class="separator" style="clear: both; text-align: center;"><br /></div>
<div class="separator" style="clear: both; text-align: center;">
вставляем ролик с ютюба
</div>
<div class="separator" style="clear: both; text-align: center;"><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<iframe
allowfullscreen=""
class="BLOG_video_class"
height="266"
src="https://www.youtube.com/embed/jMlUUodXiIo"
width="320"
youtube-src-id="jMlUUodXiIo"
></iframe>
</div>
<div class="separator" style="clear: both; text-align: center;"><br /></div>
<div class="separator" style="clear: both; text-align: center;"><br /></div>
Викаhttp://www.blogger.com/profile/11579231753656787833noreply@blogger.com1tag:blogger.com,1999:blog-3259694844269741774.post-8310805862966252012019-09-16T02:04:00.001-07:002020-03-05T05:51:36.294-08:00<div dir="ltr" style="text-align: left;" trbidi="on">
Привет, друзья. Функция копирования текста<br />
<br />
Возьмём примерно такой код и попробуем его скопировать кликом на соответствующую кнопку.<br />
<br />
<div id="text1">
<style><br />
#knopka {<br />
display: inline-block;<br />
font-size: 14px;<br />
font-weight: 400;<br />
line-height: 2;<br />
cursor:pointer;<br />
border: 1px solid transparent;<br />
border-radius: 4px<br />
}</style></div>
<div id="text2">
<br />
<br />
Попробуйте скопировать сейчас именно этот текст в буфер обмена, да, да именно этот текст.<br />
<br />
Просто нажмите на кнопку<br />
<br /></div>
<button id="knopka" onclick="copytext('#text1')">скопировать код</button>
<button id="knopka" onclick="copytext('#text2')">скопировать текст</button>
<script>
function copytext(el) {
var $tmp = $("<input>");
$("body").append($tmp);
$tmp.val($(el).text()).select();
document.execCommand("copy");
$tmp.remove();
}</script>
<style>
#knopka {
display: inline-block;
font-size: 14px;
font-weight: 400;
line-height: 2;
cursor:pointer;
border: 2px solid transparent;
border-radius: 20px
}
#knopka {
color: #fffbfb;
padding: 8px 15px;
background-color: #00695C;
border-color: #B2DFDB;
}
#knopka{
background-color: #00BFA5;
border-color: #c1bdbd;
color: #fff;
}
#knopka:hover {
color: #fff;
background-color: #00BFA5;
border-color: #2e6da4
}
</style>
<br />
<br />
<div>
<br />
<br /></div>
</div>
Викаhttp://www.blogger.com/profile/11579231753656787833noreply@blogger.com0tag:blogger.com,1999:blog-3259694844269741774.post-89240445739208423412018-04-26T01:15:00.001-07:002018-04-26T06:23:25.568-07:00<div dir="ltr" style="text-align: left;" trbidi="on">
<h3 class="gradient-text">
Вот такой красивый текст получаем используя свойство градиент</h3>
<style>.gradient-text{
background:#00626b;
background:-moz-linear-gradient(left,#00626b 0,#61c419 50%,#00f7ca 100%);
background:-webkit-linear-gradient(left,#00626b 0,#61c419 50%,#00f7ca 100%);
background:linear-gradient(to right,#00626b 0,#61c419 50%,#00f7ca 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00626b', endColorstr='#00f7ca', GradientType=1 );
background-clip:text;
-webkit-background-clip:text;
text-fill-color:transparent;
-webkit-text-fill-color:transparent;
}</style>
ещё пример текста
<p class="striped-text">Полосатый текст</p>
<style>.striped-text {
font-family: 'Rubik One', sans-serif;
font-size: 50px;
text-transform: uppercase;
background: repeating-linear-gradient(white, white 2px, #CC3300 2px, #CC3300 3px);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: #3333CC;
display: table;
margin: 20px auto;
}</style>
<p class="striped-shadow">Тень в полоску</p>
<style>.striped-shadow {
font-family: 'Rubik One', sans-serif;
font-size: 50px;
text-transform: uppercase;
text-shadow: -4px -4px 0px #339933;
background: repeating-linear-gradient(45deg, #6EB495, #6EB495 1px, white 2px, white 3px);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: table;
margin: 20px auto;
}</style>
<div class="gradient-all">Градиент границы и текста</div>
<style>
.gradient-all {
font-size: 2em;
background: linear-gradient(135deg, #12BCB0 20%, #FABE0E 70%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
padding: 0.3em 0.6em ;
border: 3px solid transparent;
border-image: linear-gradient(135deg, #12BCB0 20%, #FABE0E 70%);
border-image-slice: 1;
}</style>
</div>
Викаhttp://www.blogger.com/profile/11579231753656787833noreply@blogger.com0tag:blogger.com,1999:blog-3259694844269741774.post-72305510791495833112016-08-12T03:38:00.001-07:002016-09-06T09:14:40.178-07:00Галерея<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<style>
#gallery {
text-align: center;
width: 610px;
margin: 70px auto;
}
#gallery img {
width: 300px;
-webkit-transition-duration: 0.6s;
-moz-transition-duration: 0.6s;
-o-transition-duration: 0.6s;
opacity: 0.6; /*initial opacity of the image*/
z-index: 1;
margin: 0;
position: relative;
}
#gallery img:hover {
-webkit-transform: scale( 1.5 );
-moz-transform: scale( 1.5 );
-o-transform: scale( 1.5 );
box-shadow: 0px 0px 25px gray;
-webkit-box-shadow: 0px 0px 25px gray;
-moz-box-shadow: 0px 0px 25px gray;
opacity: 1;
z-index: 10;
}</style>
<br />
<div id="gallery">
<img alt="" src="http://pedsovet.su/_ld/141/49060413.jpg " />
<img alt="" src="http://donbass.ua/multimedia/images/news/original/2011/05/27/leto_mj.jpg " />
<img alt="" b="" http:="" jpg="" pics="" radiovesti.ru="" src=" https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTt9GRAcd4Udg6tKIF4wzVZPF2FQ2EelsF4VQM87aWrT2C-UQQQ " />
<img alt="" src="http://img0.liveinternet.ru/images/attach/c/1//57/860/57860533_736276.jpg " />
</div>
<script type="text/javascript">(function(w,doc) {
if (!w.__utlWdgt ) {
w.__utlWdgt = true;
var d = doc, s = d.createElement('script'), g = 'getElementsByTagName';
s.type = 'text/javascript'; s.charset='UTF-8'; s.async = true;
s.src = ('https:' == w.location.protocol ? 'https' : 'http') + '://w.uptolike.com/widgets/v1/uptolike.js';
var h=d[g]('body')[0];
h.appendChild(s);
}})(window,document);
</script>
<div class="uptolike-buttons" data-additional-network-text="я в" data-background-alpha="0.0" data-background-color="#ffffff" data-buttons-color="#ffffff" data-counter-background-alpha="1.0" data-counter-background-color="#ffffff" data-exclude-show-more="false" data-follow-button-text="присоединяйтесь" data-follow-fb="ваш_id" data-following-enable="true" data-hover-effect="scale" data-icon-color="#ffffff" data-like-text-enable="false" data-mobile-sn-ids="fb.vk.tw.wh.ok.vb." data-mobile-view="true" data-mode="share_picture" data-orientation="horizontal" data-pid="1563379" data-preview-mobile="false" data-selection-enable="true" data-share-counter-size="12" data-share-counter-type="separate" data-share-shape="round-rectangle" data-share-size="30" data-share-style="11" data-sn-ids="fb.vk.tw.ok." data-text-color="#000000" data-top-button="false">
</div>
</div>
Викаhttp://www.blogger.com/profile/11579231753656787833noreply@blogger.com0tag:blogger.com,1999:blog-3259694844269741774.post-53225601825753848512016-07-06T02:26:00.000-07:002017-10-17T07:30:31.554-07:00сокол<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
Просто 2 картинки .</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.syl.ru/misc/i/ai/154826/515051.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.syl.ru/misc/i/ai/154826/515051.jpg" height="256" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoFRws7rkYyH3bm42d7uLHLfNEs9YR_Pv_5VMKSpomn-RVZIwtdEPr0P_EuREAi-tvAHgAb1cMi7tVHCRjNVbtwdhyTm3w8TGGD_Au6XWwt7EM49YBSJ4RDLyZdpZ8Rj9KPxuD_W_vNro/s1600/%25D1%2581%25D0%25BE%25D0%25BA%25D0%25BE%25D0%25BB.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoFRws7rkYyH3bm42d7uLHLfNEs9YR_Pv_5VMKSpomn-RVZIwtdEPr0P_EuREAi-tvAHgAb1cMi7tVHCRjNVbtwdhyTm3w8TGGD_Au6XWwt7EM49YBSJ4RDLyZdpZ8Rj9KPxuD_W_vNro/s320/%25D1%2581%25D0%25BE%25D0%25BA%25D0%25BE%25D0%25BB.png" width="320" /></a></div>
<br /></div>
Викаhttp://www.blogger.com/profile/11579231753656787833noreply@blogger.com1tag:blogger.com,1999:blog-3259694844269741774.post-39018198441021693102016-05-01T23:03:00.000-07:002017-10-17T07:30:53.685-07:00подсказка<div dir="ltr" style="text-align: left;" trbidi="on">
Прошу вас перейти по <a href="http://www.shpargalochki.ru/2016/04/nalozhenie-kartink-na-kartinku-CSS.html" title="наложение картинки на картинку"> этой ссылке</a> чтобы увидеть эффект наложения картинки на картинку.
А в этом варианте<br />
Или ещё один интересный эффект для изображений в блоге можно посмотреть <a href="http://www.shpargalochki.ru/2014/12/jeffekt-animacii-kartinki-css.html" title=" эффект анимации">здесь.</a></div>
Викаhttp://www.blogger.com/profile/11579231753656787833noreply@blogger.com0tag:blogger.com,1999:blog-3259694844269741774.post-41505631324097102832016-02-28T07:37:00.001-08:002016-04-12T23:15:46.806-07:00Просто красивые картинки.<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<style>
.liftup{
padding: 5px;
position: relative;
width: 200px;
height: 150px;
overflow: hidden;
border: 1px solid black;
background:green ;
color: white;
box-shadow: 0 0 0 gray;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
.liftup:hover{
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
-moz-transform: rotateX(20deg);
-webkit-transform: rotateX(20deg);
transform: rotateX(20deg);
-moz-transform-origin: 50% 0;
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
box-shadow: 0 20px 20px -5px gray;
}
.liftup img{
width: 200px;
height: 150px;
}
</style>
<br />
<div class="liftup">
<a href="http://test-tri.blogspot.ru/" target="_blank">
<img src="http://www.zooclub.ru/attach/10000/10686.jpg " />title="пояснительный текст " </a></div>
<div class="liftup">
<img src="http://biglux.ru/photos/jivotnye/01.jpg " />
</div>
<div class="liftup">
<img src="http://fishki.net/picsw/042013/18/post/zhivotnie/tn.jpg " /></div>
<div class="liftup">
<img src=" http://facepla.net/images/MB/2011/443/11_animals_mate_3.jpg " /></div>
</div>
<style type="text/css">
.content-inner {background-color: cream;}
</style></div>
Викаhttp://www.blogger.com/profile/11579231753656787833noreply@blogger.com8tag:blogger.com,1999:blog-3259694844269741774.post-16891735440969438262016-02-21T23:44:00.002-08:002016-02-21T23:53:14.742-08:00Появляющееся описание у ссылки<div dir="ltr" style="text-align: left;" trbidi="on">
<style>a:hover { background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/
a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;}
a.tooltip:hover span{display:inline; position:absolute; background:#ffffff; border:1px solid #cccccc; color:#6c6c6c;}</style>
<a class="tooltip" href="http://test-tri.blogspot.ru/ ">Это ссылка <span>Переход на главную страницу</span></a>. </div>
Викаhttp://www.blogger.com/profile/11579231753656787833noreply@blogger.com2tag:blogger.com,1999:blog-3259694844269741774.post-77491339295914807222016-02-01T04:46:00.000-08:002016-03-06T21:32:40.028-08:00сообщение<div dir="ltr" style="text-align: left;" trbidi="on">
ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn ntrcn<br />
<br />
<br /></div>
Викаhttp://www.blogger.com/profile/11579231753656787833noreply@blogger.com5tag:blogger.com,1999:blog-3259694844269741774.post-3392881312445159682016-02-01T04:40:00.000-08:002019-05-22T06:06:35.079-07:00коменнтарии<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<style>.boxkets {border:dashed #333 2px;padding:8px;background-color: #E9F4FC;width: 95%;margin:0 auto;}
.rivaisilaban-titlekets {
position: relative;
padding: 5px;
margin: 20px 0px;
color: #FFFFFF;
width: 20%;
text-align: center;
text-shadow: 1px 1px 1px rgb(0, 0, 0);
color:#FFFFFF;
font-weight:bold;
background-color: #525252;
}
.rivaisilaban-titlekets:before {
content:"";
display:block;
position:absolute;
bottom:-20px;
left:40px;
width:0;
height:0;
border:0;
border-right-width:30px;
border-bottom-width:20px;
border-style:solid;
border-color:transparent #525252;
}</style>
<br />
<div class="rivaisilaban-titlekets">
текст ниже</div>
<div class="boxkets">
Тут пишем всё, что душа пожелает.</div>
</div>
Викаhttp://www.blogger.com/profile/11579231753656787833noreply@blogger.com3