tag:blogger.com,1999:blog-38941043739479716102024-02-21T07:17:55.477+05:00шпаргалкаВикаhttp://www.blogger.com/profile/11579231753656787833noreply@blogger.comBlogger16125tag:blogger.com,1999:blog-3894104373947971610.post-67785443576874299582022-01-11T19:46:00.001+05:002022-01-11T19:46:04.978+05:00ссылки<div class="container-7">
<p><a href="#">Я Ссылка.</a></p>
</div>
<style>
.container-7 a {
color: #3399FF;
text-decoration:none;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
position:relative;
display:inline-block;
}
.container-7 a:hover {
text-decoration:none;
color: #337AB7;
z-index:1;
position:relative;
}
.container-7 a::after{
position: fixed;
width: 100%;
height: 100%;
content: "";
z-index:-1;
top:0;
left:0;
pointer-events: none;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
opacity:0;
}
.container-7 a:hover::after,
.container-7 a:focus::after {
background: #FFF;
opacity:0.8;
}</style>
<div class="container-4">
<p><a href="#">И я тоже ссылка.</a></p>
</div>
<style>
.container-4 {
overflow:hidden;
}
.container-4 a {
color: #3399FF;
text-decoration:none;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
position: relative;
display:inline-block;
}
.container-4 a:hover {
color: #337AB7;
text-decoration:none;
}
.container-4 a::before,
.container-4 a::after {
position: absolute;
top: 50%;
left: 50%;
width: 60px;
height: 60px;
border: 8px solid #3399FF;
border-radius: 50%;
content: '';
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
-moz-transition: -moz-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
-webkit-transform: translateX(-50%) translateY(-50%) scale(0.1);
-moz-transform: translateX(-50%) translateY(-50%) scale(0.1);
transform: translateX(-50%) translateY(-50%) scale(0.1);
pointer-events: none;
}
.container-4 a::after {
width: 20px;
height: 20px;
border-width: 16px;
-webkit-transform: translateX(-50%) translateY(-50%) scale(0.1);
-moz-transform: translateX(-50%) translateY(-50%) scale(0.1);
transform: translateX(-50%) translateY(-50%) scale(0.1);
}
.container-4 a:hover::before,
.container-4 a:hover::after,
.container-4 a:focus::before,
.container-4 a:focus::after {
opacity: 0.2;
-webkit-transform: translateX(-50%) translateY(-50%) scale(1);
-moz-transform: translateX(-50%) translateY(-50%) scale(1);
transform: translateX(-50%) translateY(-50%) scale(1);
} </style>
<div class="container-8">
<p><a href="#">Ещё ссылка. Подведи курсор.</a></p>
</div>
<style>
.container-8 a {
color: #000;
text-decoration:none;
position:relative;
display:inline-block;
}
.container-8 a:hover {
text-decoration:none;
}
.container-8 a::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)) no-repeat 100% 0%;
background-size: 100% 100%;
}
.container-8 a:hover::before,
.container-8 a:focus::before {
transition: 0.5s linear;
background-size: 0 100%;
}
.container-8 a::after {
position: absolute;
display: block;
content: "";
height: 1px;
width: 100%;
background-color: #3399FF;
transition: width 0.5s ease-in-out;
}
.container-8 a:hover::after,
.container-8 a:focus::after {
width: 0%;
right:0;
}
</style>
<div class="container-1">
<a href="#link">Волнистое подчёркивание ссылки</a>
</div>
<style>
.container-1 a {
background: linear-gradient(to bottom, #337AB7 0%, #337AB7 100%);
background-position: 0 100%;
background-repeat: repeat-x;
background-size: 1px 1px;
color: #000;
text-decoration: none;
padding-bottom: 2px;
}
.container-1 a:hover {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23337AB7' stroke-width='1' class='squiggle' d='M0,3.5 c 5,0,5,-2,10,-2 s 5,2,10,2 c 5,0,5,-2,10,-2 s 5,2,10,2'/%3E%3C/svg%3E");
background-position: 0 100%;
background-size: auto 4px;
background-repeat: repeat-x;
text-decoration: none;
</style>
Викаhttp://www.blogger.com/profile/11579231753656787833noreply@blogger.com0tag:blogger.com,1999:blog-3894104373947971610.post-53297446050662203762021-05-18T10:34:00.010+05:002021-07-13T18:43:15.247+05:00эффект для текста и заголовка<div class="hover-letter">Hover-эффект букв</div>
<div class="hover-letter">для текста или заголовка</div>
<style>
.hover-letter {
position: relative;
text-align: center;
}
.hover-letter span {
color: #DD2C00;
font-family: 'Roboto Condensed', sans-serif;
font-size: 42px;
line-height: 1.2;
font-weight: bold;
transition: all 0.3s ease-in-out;
text-shadow: 0 0 4px rgba(0,0,0, 0.2);
position: relative;
text-transform: uppercase;
top: 0px;
left: 0px;
cursor: default;
z-index: 1;
}
.hover-letter span:hover {
text-shadow: -8px 8px 0 rgba(255, 0, 0, 0.2);
color:#311B92;
top: -8px;
left: 8px;
z-index: 2;
}
@media screen and (max-width: 767px) {
.hover-letter span {
font-size: 28px;
}
}</style>
<script>
let hover = document.getElementsByClassName('hover-letter');
for (let i=0; i<hover.length; i++) {
hover[i].innerHTML = hover[i].innerHTML.replace(/(.)/g, '<span>$1</span>');
}
</script>
Викаhttp://www.blogger.com/profile/11579231753656787833noreply@blogger.com0tag:blogger.com,1999:blog-3894104373947971610.post-15569167247667788622021-05-18T10:04:00.003+05:002021-05-18T10:06:10.349+05:00<div class="fading">исчезающие буковки</div>
<style>
.fading {
color: #B71C1C;
font-size: 32px;
line-height: 336px;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
margin: 30px 0;
}
.fading span {
animation: fading 3s alternate infinite;
opacity: 0;
}
@keyframes fading {
0% {
opacity: 0;
filter: blur(10px);
}
50%, 100% {
opacity: 1;
filter: blur(0px);
}
} </style>
<script>
let fadingHeading = document.querySelectorAll('.fading');
for (let a = 0; a < fadingHeading.length; a++){
let letters = fadingHeading[a].textContent.split('');
let content = letters.map((val, i) => {
let delay = Math.floor((Math.random() * 1000) + 1);
return ('<span style="animation-delay: '+ delay + 'ms">'+ val +'</span>');
});
fadingHeading[a].innerHTML = "";
for (let i = 0; i < content.length; i++) {
fadingHeading[a].innerHTML += content[i];
}
}</script>Викаhttp://www.blogger.com/profile/11579231753656787833noreply@blogger.com0tag:blogger.com,1999:blog-3894104373947971610.post-18418412427495342002021-04-08T23:43:00.004+05:002021-04-08T23:55:49.101+05:00проверка<p style="text-align: left;"><font color="#000" face="Arial" size="5"><em>П</em></font><font color="#0f0" face="Verdana" size="4"><b>Р</b></font><font color="#off" face="Courier" size="4"><em>И</em></font><font color="#f0f" font="Impact" size="4"><b>В</b></font><font color="#036" face="Arial" size="5"><em>Е</em></font><font><em style="color: #fcff01; font-family: Arial; font-size: x-large;">Т </em><b style="font-family: Arial; font-size: x-large;"><span style="color: red;">д</span></b><span style="color: #45818e; font-family: courier; font-size: x-large; font-style: italic;"><b>р</b></span><b style="font-style: italic;"><span style="color: #990000; font-family: times; font-size: x-large;">у</span></b><span style="color: #a64d79; font-family: courier; font-size: medium;"><b>ж</b></span><i style="color: #fcff01; font-family: Arial; font-size: x-large;">и</i><i><span style="color: #cc0000; font-family: courier; font-size: x-large;"><b>щ</b></span></i><span style="font-family: Arial;"><b><span style="color: #6aa84f;">е</span></b></span></font></p>Викаhttp://www.blogger.com/profile/11579231753656787833noreply@blogger.com0tag:blogger.com,1999:blog-3894104373947971610.post-57969015019764208332020-12-08T13:54:00.000+05:002020-12-08T13:54:48.764+05:00запрет копирования текста<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://www.iguides.ru/upload/iblock/7df/7df5d9bccc4d61660ec5241b84cab50e.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="450" data-original-width="740" height="121" src="https://www.iguides.ru/upload/iblock/7df/7df5d9bccc4d61660ec5241b84cab50e.jpg" width="200" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
попробуйте скопировать этот текст если получится и потом скопируйте следующую цитату<br />
<br />
<br />
<br />
<br />
<br />
цитирование допускается без согласия автора и без выплаты авторского вознаграждения, но с обязательным указанием имени автора, <br />
произведение которого используется, и источника заимствования:
<br />
попробуйте скопировать этот текст если получится и потом скопируйте приведённый ниже код<br />
<br />
<div class="bloknot3">
<blockquote class="kata"><br />
<br />
1. Тут весь ваш интересный текст<br />
</blockquote></div>
<br />
<br />
Попробуйте скопировать текст. и что из этого получиться. А код, пожалуйста, как и цитату.<div id="scroll-percentage">
<div class="percentage"></div>
</div>
<div id="percentage-value">0%</div>
<script type="text/javascript">const updateScrollPercentage = function() {
const heightOfWindow = window.innerHeight,
contentScrolled = window.pageYOffset,
bodyHeight = document.body.offsetHeight,
percentage = document.querySelector(".percentage"),
percentageVal = document.querySelector("#percentage-value")
if(bodyHeight - contentScrolled <= heightOfWindow) {
percentageVal.textContent = percentage.style.width = "100%"
}
else {
const total = bodyHeight - heightOfWindow,
got = contentScrolled,
percent = parseInt((got/total) * 100)
percentageVal.textContent = percentage.style.width = percent + "%"
}
}
window.addEventListener('scroll', updateScrollPercentage)</script>
<style>#scroll-percentage {
position: fixed;
bottom: 0;
left: 0x;
width: 100vw;
color: #000;
margin: 0;
padding: 0;
z-index: 1000;
}
#scroll-percentage .percentage {
display: inline-block;
background-color: #004D40;
border-bottom: 5px solid #F4FF81;
height: 4px;
width: 0;
box-sizing: content-box;
}
#percentage-value {
box-sizing: content-box;
position: fixed;
bottom: 20px;
left: 20px;
height: 80px;
width: 80px;
color: #FFFFFF;
background-color: #004D40;
text-align: center;
line-height: 80px;
border-radius: 50%;
border: 5px solid #F4FF81;
font-size: 24px;
font-weight: bold;
z-index: 1000;
box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
} </style></div>
Викаhttp://www.blogger.com/profile/11579231753656787833noreply@blogger.com3tag:blogger.com,1999:blog-3894104373947971610.post-13012426720105429582020-02-29T12:01:00.003+05:002021-04-26T20:19:14.553+05:00оформление блока<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="img-section">
<img alt="" height="200" src="https://avatars.mds.yandex.net/get-pdb/901820/7909be1b-5b7d-4bfa-800c-19853f1c0781/s1200" width="400" />
<br />
<div class="img-data">
<span face=""verdana" , sans-serif" style="background-color: white; color: #303030; font-size: 16px; letter-spacing: 0.3px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid et tempore quae quas pariatur ratione voluptas inventore. Doloremque soluta quisquam natus perspiciatis.</span><br />
<br /></div>
</div>
<style>
.img-section {
width: 100%;
background: linear-gradient(135deg, #00897B 0%, #00897B 40%, #FFF 40%, #FFF 100%);
display: flex;
align-items: center;
margin: 20px 0;
}
.img-section img {
border: 12px solid rgba(204, 255, 144, 0.8);
box-shadow: 5px 7px 16px rgba(0, 0, 0, 0.7);
margin: 40px;
box-sizing: border-box;
flex: 0 0 45%;
width: 45%;
}
.img-section .img-data {
font-family: Verdana, sans-serif;
font-size: 16px;
padding: 20px;
}
@media only screen and (max-width: 700px) {
.img-section {
flex-flow: row wrap;
}
.img-section .img-data {
background: #FFF;
border-bottom: 5px solid #AED581;
}
.img-section img {
margin: 40px auto;
flex: 0 0 80%;
width: 80%;
}
}
</style>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid et tempore quae quas pariatur ratione voluptas inventore. Doloremque soluta quisquam natus perspiciatis. <div><br /></div><div> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid et tempore quae quas pariatur ratione voluptas inventore. Doloremque soluta quisquam natus perspiciatis. </div><div><br /></div><div> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid et tempore quae quas pariatur ratione voluptas inventore. Doloremque soluta quisquam natus perspiciatis.
</div>Викаhttp://www.blogger.com/profile/11579231753656787833noreply@blogger.com0tag:blogger.com,1999:blog-3894104373947971610.post-27604089595812482312020-01-31T12:41:00.001+05:002020-01-31T14:20:16.769+05:00видео слайдер<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<center>
<div class="youtube">
<iframe allowfullscreen="" frameborder="0" height="280" name="slider" src="https://www.youtube.com/embed/BhB35ELD_QA?rel=0" width="380"></iframe></div>
</center>
<br />
<center>
<a href="https://www.youtube.com/embed/BhB35ELD_QA?rel=0&autoplay=1" target="slider">●
</a>
<a href="https://www.youtube.com/embed/xFa2_PVMeDQ?rel=0&autoplay=1" target="slider">●
</a>
<a href="https://www.youtube.com/embed/J2KH7q71xeY?rel=0&autoplay=1" target="slider">●
</a><a href="https://www.youtube.com/embed/kgz1KNVMaUU?rel=0&autoplay=1" target="slider">●</a></center>
</div>
<style>
#youtube {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 5px;
border: 1px solid #555;
}
</style></div>
Викаhttp://www.blogger.com/profile/11579231753656787833noreply@blogger.com0tag:blogger.com,1999:blog-3894104373947971610.post-17884985441106463042020-01-31T12:30:00.001+05:002020-01-31T14:22:30.044+05:00<div dir="ltr" style="text-align: left;" trbidi="on">
<center>
<style>.television-base{background:url(https://i.imgur.com/VFlxiox.png) no-repeat top center;height:458px;width:578px;padding-top:38px;padding-left:12px; tmargin-left:15px}</style>
<div class="television-base">
<div>
<iframe allowfullscreen="" frameborder="0" height="283" name="slider" src="https://www.youtube.com/embed/J2KH7q71xeY" width="511"></iframe></div>
</div>
<a href="https://www.youtube.com/embed/BhB35ELD_QA" target="slider">1 мультик
</a>
<a href="https://www.youtube.com/embed/KWjrga2vQUs" target="slider">2 мультик
</a>
<a href="https://www.youtube.com/embed/NBt-kZz0aCE" target="slider">3 мультик</a>
</center>
</div>
Викаhttp://www.blogger.com/profile/11579231753656787833noreply@blogger.com0tag:blogger.com,1999:blog-3894104373947971610.post-67849921801067729862019-09-09T22:59:00.002+05:002019-11-27T17:47:42.314+05:00Моя малая Родина<div dir="ltr" style="text-align: left;" trbidi="on">
Привет, друзья. Обычно на веб странице, при наведении курсора<br />
<style type="text/css">
.imm-tooltip {
position: relative;
margin: 10px auto;
}
.imm-tooltip img {
width:450px; /* ширина */
border:1px dashed #036; /* стили рамки */
background-color:lightyellow; /* фон изображения */
padding:5px;
}
.tooltip {
position: absolute;
width:320px; /* ширина всплывающего описания */
font-size:15px; /* размер шрифта */
font-family: Georgia;
top: 5%;
left: 2%;
filter: alpha(opacity=0);
opacity: 0;
padding: 6px;
text-align:justify; /* выравнивание текста */
color: #fff; /* цвет текста */
background: black; /* фон блока с текстом */
-moz-transition:all ease .5s; /* Длительность Перехода*/
-webkit-transition:all ease .5s ;
transition:all ease .5s;
}
.imm-tooltip:hover .tooltip {
filter: alpha(opacity=70);
opacity: .7; /* Прозрачность при наведении мыши */
}
</style>
<br />
<div class="imm-tooltip">
<img alt="nome-immagine" height="426" src="https://avatars.mds.yandex.net/get-zen_doc/1886085/pub_5cf0fb63b1330200acdef32c_5cf104f803f1e92608489eaf/scale_1200" width="640" /><span class="tooltip">Айские притесы — это очень высокие скалы вдоль реки Ай. Великолепнейшие виды! Протяженность притесов примерно один километр.
Это уникальное творение природы и это кусочек моей малой Родины. В детстве бегали сюда купаться.
</span><br />
<span class="tooltip"><br /></span>
<span class="tooltip">Готовый код</span><br />
<span class="tooltip"><br /></span>
<style type="text/css"><br />
.imm-tooltip {<br />
position: relative;<br />
margin: 10px auto;<br />
}<br />
.imm-tooltip img {<br />
width:450px; /* ширина */<br />
border:1px dashed #036; /* стили рамки */<br />
background-color:lightyellow; /* фон изображения */<br />
padding:5px;<br />
}<br />
.tooltip {<br />
position: absolute;<br />
width:320px; /* ширина всплывающего описания */<br />
font-size:15px; /* размер шрифта */<br />
font-family: Georgia;<br />
top: 5%;<br />
left: 2%;<br />
filter: alpha(opacity=0);<br />
opacity: 0;<br />
padding: 6px;<br />
text-align:justify; /* выравнивание текста */<br />
color: #fff; /* цвет текста */<br />
background: black; /* фон блока с текстом */<br />
-moz-transition:all ease .5s; /* Длительность Перехода*/<br />
-webkit-transition:all ease .5s ;<br />
transition:all ease .5s;<br />
}<br />
.imm-tooltip:hover .tooltip {<br />
filter: alpha(opacity=70);<br />
opacity: .7; /* Прозрачность при наведении мыши */<br />
}<br />
</style><br />
<br />
<br /><br />
<div class="imm-tooltip"><br />
<img alt="<span style="color: #ea9999;">айские притёсы</span>" src="<span style="color: #e06666;">адрес вашего изображения</span>" /><span class="tooltip"><span style="color: #e06666;">здесь описание картинки</span><br />
<span class="tooltip"></span><br />
</span></div><br />
<span class="tooltip"><br /></span>
<span class="tooltip"><br /></span></div>
</div>
Викаhttp://www.blogger.com/profile/11579231753656787833noreply@blogger.com0tag:blogger.com,1999:blog-3894104373947971610.post-17076728740578231392019-08-19T17:38:00.000+05:002019-11-07T21:57:01.965+05:00<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="container">
<div class="row">
<div class="col-xs-12">
<ul class="nav nav-tabs nav-justified">
<li><a href="https://bvd-2.blogspot.com/2019/08/lorem-ipsum-dolor-sit-amet-consectetur.html#firstBlock">Первый якорь</a></li>
<li><a href="https://bvd-2.blogspot.com/2019/08/lorem-ipsum-dolor-sit-amet-consectetur.html#secondBlock">Второй якорь</a></li>
<li><a href="https://bvd-2.blogspot.com/2019/08/lorem-ipsum-dolor-sit-amet-consectetur.html#thirdBlock">Третий якорь</a></li>
<li><a href="https://bvd-2.blogspot.com/2019/08/lorem-ipsum-dolor-sit-amet-consectetur.html#fourthBlock">Четвертый якорь</a></li>
</ul>
</div>
</div>
</div>
<br />
<section class="container">
<div class="row">
<div class="col-xs-12">
<h1 id="firstBlock">
Первый якорь</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis rerum deleniti quibusdam molestiae esse ad iusto natus, asperiores doloribus impedit quia quasi placeat unde recusandae ut fuga enim vel incidunt sed perspiciatis magni culpa corporis hic! Ducimus distinctio esse quod eius repudiandae at magni repellat, expedita molestiae, delectus, aliquam laborum vel eveniet reprehenderit sunt voluptate similique! Laborum earum sunt culpa vitae excepturi. Eum, at, illum! Quaerat inventore saepe, impedit incidunt suscipit, ipsum hic eligendi accusantium. Vero rerum vitae earum repellendus eligendi id dolores possimus ipsam, accusantium est atque eum, ea at, porro placeat totam nihil natus sit. Tempore obcaecati hic, veniam quod doloremque ducimus similique, reiciendis maiores velit voluptatibus voluptatem totam officiis ab. Voluptate laudantium officia voluptates enim magni expedita nihil commodi itaque rem iure eaque, eius cumque dignissimos, ullam praesentium quas iusto dicta sint beatae saepe qui impedit eum est. Cupiditate eos unde eum maiores, repellendus in rerum natus doloremque accusamus nam labore aspernatur sequi optio iste quisquam quasi at, tempora facilis? Et amet ullam magni voluptates reiciendis, id culpa. </div>
</div>
</section>
<section class="container">
<div class="row">
<div class="col-xs-12">
<h2 id="secondBlock">
Второй якорь</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis rerum deleniti quibusdam molestiae esse ad iusto natus, asperiores doloribus impedit quia quasi placeat unde recusandae ut fuga enim vel incidunt sed perspiciatis magni culpa corporis hic! Ducimus distinctio esse quod eius repudiandae at magni repellat, expedita molestiae, delectus, aliquam laborum vel eveniet reprehenderit sunt voluptate similique! Laborum earum sunt culpa vitae excepturi. Eum, at, illum! Quaerat inventore saepe, impedit incidunt suscipit, ipsum hic eligendi accusantium. Vero rerum vitae earum repellendus eligendi id dolores possimus ipsam, accusantium est atque eum, ea at, porro placeat totam nihil natus sit. Tempore obcaecati hic, veniam quod doloremque ducimus similique, reiciendis maiores velit voluptatibus voluptatem totam officiis ab. Voluptate laudantium officia voluptates enim magni expedita nihil commodi itaque rem iure eaque, eius cumque dignissimos, ullam praesentium quas iusto dicta sint beatae saepe qui impedit eum est. Cupiditate eos unde eum maiores, repellendus in rerum natus doloremque accusamus nam labore aspernatur sequi optio iste quisquam quasi at, tempora facilis? Et amet ullam magni voluptates reiciendis, id culpa. </div>
</div>
</section>
<section class="container">
<div class="row">
<div class="col-xs-12">
<h3 id="thirdBlock">
Третий якорь</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis rerum deleniti quibusdam molestiae esse ad iusto natus, asperiores doloribus impedit quia quasi placeat unde recusandae ut fuga enim vel incidunt sed perspiciatis magni culpa corporis hic! Ducimus distinctio esse quod eius repudiandae at magni repellat, expedita molestiae, delectus, aliquam laborum vel eveniet reprehenderit sunt voluptate similique! Laborum earum sunt culpa vitae excepturi. Eum, at, illum! Quaerat inventore saepe, impedit incidunt suscipit, ipsum hic eligendi accusantium. Vero rerum vitae earum repellendus eligendi id dolores possimus ipsam, accusantium est atque eum, ea at, porro placeat totam nihil natus sit. Tempore obcaecati hic, veniam quod doloremque ducimus similique, reiciendis maiores velit voluptatibus voluptatem totam officiis ab. Voluptate laudantium officia voluptates enim magni expedita nihil commodi itaque rem iure eaque, eius cumque dignissimos, ullam praesentium quas iusto dicta sint beatae saepe qui impedit eum est. Cupiditate eos unde eum maiores, repellendus in rerum natus doloremque accusamus nam labore aspernatur sequi optio iste quisquam quasi at, tempora facilis? Et amet ullam magni voluptates reiciendis, id culpa. </div>
</div>
</section>
<section class="container">
<div class="row">
<div class="col-xs-12">
<h4 id="fourthBlock">
Четвертый якорь</h4>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis rerum deleniti quibusdam molestiae esse ad iusto natus, asperiores doloribus impedit quia quasi placeat unde recusandae ut fuga enim vel incidunt sed perspiciatis magni culpa corporis hic! Ducimus distinctio esse quod eius repudiandae at magni repellat, expedita molestiae, delectus, aliquam laborum vel eveniet reprehenderit sunt voluptate similique! Laborum earum sunt culpa vitae excepturi. Eum, at, illum! Quaerat inventore saepe, impedit incidunt suscipit, ipsum hic eligendi accusantium. Vero rerum vitae earum repellendus eligendi id dolores possimus ipsam, accusantium est atque eum, ea at, porro placeat totam nihil natus sit. Tempore obcaecati hic, veniam quod doloremque ducimus similique, reiciendis maiores velit voluptatibus voluptatem totam officiis ab. Voluptate laudantium officia voluptates enim magni expedita nihil commodi itaque rem iure eaque, eius cumque dignissimos, ullam praesentium quas iusto dicta sint beatae saepe qui impedit eum est. Cupiditate eos unde eum maiores, repellendus in rerum natus doloremque accusamus nam labore aspernatur sequi optio iste quisquam quasi at, tempora facilis? Et amet ullam magni voluptates reiciendis, id culpa. </div>
</div>
</section>
</div>
Викаhttp://www.blogger.com/profile/11579231753656787833noreply@blogger.com0tag:blogger.com,1999:blog-3894104373947971610.post-81827027879221141442019-08-19T10:53:00.001+05:002019-10-13T11:25:27.819+05:00блоки<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="on-hover">
Видимый блок
</div>
<div class="hidden-block">
А это то что появится. Может быть текст или картинка. Как её сюда вставить рассмотрим ниже
</div>
<style>.on-hover{
width:300px;
background:#004D40;
color:#fff;
font-size:28px;
border:3px solid #4DB6AC;
padding:20px;
margin:auto;
margin-bottom:20px;
text-align:center;
}
.hidden-block{
width:300px;
background:#4DB6AC;
color:#fff;
font-size:25px;
border:3px solid #004D40;
padding:20px;
margin:auto;
text-align:center;
opacity:0; /*Элемент прозрачный (невидимый)*/
transition: 1s; /*Скорость перехода */
}
.on-hover:hover+ .hidden-block{
opacity:1;
transition: 1s;
}</style><br />
вот так создаём видимый и скрытый блок<br />
<br /></div>
Викаhttp://www.blogger.com/profile/11579231753656787833noreply@blogger.com0tag:blogger.com,1999:blog-3894104373947971610.post-80541723467722550852019-01-07T17:59:00.001+05:002019-04-03T18:17:36.879+05:00загадка<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
<div style="text-align: left;">
<a href="https://naurok.com.ua/uploads/files/247178/69240/73773_html/images/69240.002.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="148" data-original-width="93" height="200" src="https://naurok.com.ua/uploads/files/247178/69240/73773_html/images/69240.002.png" width="125" /></a></div>
<span style="color: #e06666; font-size: large;"><br /></span>
<span style="color: #e06666; font-size: large;"><br /></span>
<span style="color: #e06666; font-size: large;"><br /></span>
<span style="color: #e06666; font-size: large;"><br /></span>
<span style="color: #e06666; font-size: large;"><br /></span>
<span style="color: #e06666; font-size: large;"><br /></span>
<span style="color: #e06666; font-size: large;"><br /></span>
<span style="color: #e06666; font-size: large;"><br /></span>
<span style="color: #e06666; font-size: large;"><br /></span>
<span style="color: #e06666; font-size: large;"><br /></span>
<span style="color: #e06666; font-size: large;"> Отгадай загадку и посмотри ответ
</span></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<span style="font-size: large;"><i>Днем у них всегда есть ноги, а вот ночью ноги куда-то пропадают. </i></span></div>
<br />
<div class="canustrating">
<input class="mesnongengas" id="punch" type="checkbox" />
<label for="punch">Нажми и увидишь ответ</label>
<br />
<div>
<img alt="Ключевое слово" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp6zkoVI-ioFjpjZyJTBsm5jJngotsmBeEztVteEosJq0Cp8qvzw" style="height: auto; max-width: 100%;" />
</div>
</div>
<style>
div.canustrating {
color: #f7f4f4;
text-shadow: 0 1px 0 #444040;
width: 495px;
padding: 1px;
border-radius: 3px;
margin: 1rem;
text-align: center;
font-family: Arial Black, sans-serif;
margin: 0 auto;
}
div.canustrating label {
display: block;
background: #373c54;
font-size: larger;
border-radius: 5px;
padding: 15px;
transition: .4s all linear;
border: 2px solid #f5f3f3;
box-shadow: 1px 1px 5px rgba(72, 69, 69, 0.7), 1px 0px 10px 3px rgba(33, 31, 31, 0.44);
}
div.canustrating label:hover {
cursor: pointer; background: #380f0f;
}
input.mesnongengas ~ div {
height: 0px; margin: .2rem;
overflow: hidden;
transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620)
}
input.mesnongengas:checked ~ div { height: 215px;
}
input.mesnongengas:checked + label { background: #980c0c;
}
input.mesnongengas {
display: none;
}</style></div>
Викаhttp://www.blogger.com/profile/11579231753656787833noreply@blogger.com0tag:blogger.com,1999:blog-3894104373947971610.post-13416674274718546872018-12-18T19:57:00.002+05:002019-01-07T16:36:05.007+05: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/AVvXsEhu7u2dBtQyDuuTZVY_gxK2vwVSraN3_fSVXS9-DeY_hxI4qzXvfX2cffj6R9chEYxNWZv0GYmdF7wI1DtD4TbkQnKJcrm4R55ZaZJYGAOQdO92zkp5Szx3Xb0GjnQ47vwzw_rSr7vRJlk/s400/%25D0%25BA%25D0%25B0%25D1%2580%25D1%2582%25D0%25B8%25D0%25BD%25D0%25BA%25D0%25B8.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="200" data-original-width="400" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu7u2dBtQyDuuTZVY_gxK2vwVSraN3_fSVXS9-DeY_hxI4qzXvfX2cffj6R9chEYxNWZv0GYmdF7wI1DtD4TbkQnKJcrm4R55ZaZJYGAOQdO92zkp5Szx3Xb0GjnQ47vwzw_rSr7vRJlk/s320/%25D0%25BA%25D0%25B0%25D1%2580%25D1%2582%25D0%25B8%25D0%25BD%25D0%25BA%25D0%25B8.jpg" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="text-align: center;">
<a href="http://www.shpargalochki.ru/2016/10/oformlenijakartinok-s-ispolzovaniem-CSS.html?showComment=1545129755969#c8633391723773161219">вот такие картинки</a></div>
</div>
Викаhttp://www.blogger.com/profile/11579231753656787833noreply@blogger.com2tag:blogger.com,1999:blog-3894104373947971610.post-90626365489667872972018-06-12T21:37:00.000+05:002019-04-03T18:18:30.589+05:00ссылки с двух сторон<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.seoded.ru/beginner/img/ssilki-html.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://www.seoded.ru/beginner/img/ssilki-html.jpg" data-original-height="217" data-original-width="300" height="144" width="200" /></a></div>
<style>
#klik { overflow: hidden; } /* убирать действие float */
#klik a:nth-of-type(1) { float: left; }
#klik a:nth-of-type(2) { float: right; }
</style>
<br />
<div id="klik">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Очень просто сделать ссылки, чтобы они размещались слева и справа текста. Вот как - то так.<br />
<a href="http://www.shpargalochki.ru/">Главная</a><a href="http://www.shpargalochki.ru/p/blog-page_1.html">Все статьи</a></div>
</div>
Викаhttp://www.blogger.com/profile/11579231753656787833noreply@blogger.com2tag:blogger.com,1999:blog-3894104373947971610.post-24804801035204867262018-05-09T18:33:00.004+05:002019-01-07T16:38:21.021+05:00Мигающий текст<div dir="ltr" style="text-align: left;" trbidi="on">
<style>.area {
text-align: center;
font-size: 3.5em;
color: #fff;
letter-spacing: -7px;
font-weight: 700;
text-transform: uppercase;
animation: blur .75s ease-out infinite;
text-shadow: 0px 0px 5px #fff, 0px 0px 7px #fff;
}
@keyframes blur {
from {
text-shadow:0px 0px 10px #fff,
0px 0px 10px #fff,
0px 0px 25px #fff,
0px 0px 25px #fff,
0px 0px 25px #fff,
0px 0px 25px #fff,
0px 0px 25px #fff,
0px 0px 25px #fff,
0px 0px 50px #fff,
0px 0px 50px #fff,
0px 0px 50px #7B96B8,
0px 0px 150px #7B96B8,
0px 10px 100px #7B96B8,
0px 10px 100px #7B96B8,
0px 10px 100px #7B96B8,
0px 10px 100px #7B96B8,
0px -10px 100px #7B96B8,
0px -10px 100px #7B96B8;
}
}</style>
<div class="area">
Просто мигающий текст.<br />
⚠ Внимание </div>
</div>
Викаhttp://www.blogger.com/profile/11579231753656787833noreply@blogger.comtag:blogger.com,1999:blog-3894104373947971610.post-62001146832030369832018-05-08T19:37:00.000+05:002019-04-03T18:21:06.350+05:00красивые заголовки<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="cap1">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://i.ytimg.com/vi/H5h7m5b1Ca8/maxresdefault.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="450" data-original-width="800" height="112" src="https://i.ytimg.com/vi/H5h7m5b1Ca8/maxresdefault.jpg" width="200" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<h3>
<span style="font-weight: normal;"><span style="font-size: small;">Это тема будет интересна для новичков в веб разработке, так уже знающим, что возможно некоторые трюки могли пропустить, в плане выстраивание заголовков в оригинальном стиле. Что здесь собраны самый актуальный список трюков, и также приемов в случайном порядке по стилистике</span></span></h3>
<div>
<span style="font-weight: normal;"><span style="font-size: small;"></span></span><br />
<span style="font-weight: normal;"><span style="font-size: small;"><br /></span></span></div>
<h3>
Ваш текст</h3>
</div>
<style>h3 {
font-family: 'Merriweather', serif;
font-size: 20px;
letter-spacing: 1px;
max-width: 320px;
width: 100%;
position: relative;
display: inline-block;
color: #465457;
}
.cap1 h3 {
display: table;
width: auto;
margin: 0 auto;
padding: 15px;
letter-spacing: 2px;
border: 2px solid #cbdcea;
color: #394671;
}
.cap1 h3:after {
content: '';
position: absolute;
top: 6px;
left: 6px;
width: calc(100% - 4px);
height: calc(100% - 4px);
border: 2px solid #cbdcea;
}</style>
<br />
<div class="cap">
<h3>
Ваш текст</h3>
</div>
<style>h3 {
font-family: 'Merriweather', serif;
font-size: 20px;
letter-spacing: 1px;
max-width: 320px;
width: 100%;
position: relative;
display: inline-block;
color: #465457;
}
.cap h3 {
text-align: center;
padding-bottom: 10px;
}
.cap h3:before {
content: "";
position: absolute;
bottom: -2px;
left: 50%;
margin-left: -25%;
width: 50%;
height: 2px;
background: #79F8D7;
}
.cap h3:after {
content: "";
position: absolute;
bottom: -6px;
left: 50%;
margin-left: -15%;
width: 30%;
height: 2px;
background: #79F8D7;
}</style>
<br />
<div class="cap3">
<h3>
Заголовок 16</h3>
</div>
<style>h3 {
font-family: 'Merriweather', serif;
font-size: 20px;
letter-spacing: 1px;
max-width: 320px;
width: 100%;
position: relative;
display: inline-block;
color: #465457;
}
.cap3 h3 {
text-align: center;
padding-bottom: 10px;
}
.cap3 h3:before {
content: "";
position: absolute;
bottom: -4px;
left: 50%;
margin-left: -3px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #CBDCEA;
box-shadow: 20px 0 0 0 #CBDCEA, -20px 0 0 0 #CBDCEA;
}
.cap3 h3:after {
content: "";
position: absolute;
bottom: -7px;
left: 50%;
margin-left: -6px;
width: 12px;
height: 12px;
border-radius: 50%;
background: #FC3768;
z-index: -1;
}</style></div>
Викаhttp://www.blogger.com/profile/11579231753656787833noreply@blogger.com