Тестовое сообщение

Поделиться18116.09.22 11:22:47

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<style>
* {
box-sizing: border-box;
}

body {
display: grid;
place-items: center;
min-height: 100vh;
overflow: hidden;
}

h1 {
margin: 0;
font-size: clamp(2rem, 1rem + 10vmin, 10rem);
display: inline-flex;
align-items: flex-start;
flex-direction: column;
line-height: 0.8;
}

:root {
--red: #ea4335;
--green: #34a853;
--yellow: #fbbc05;
--speed: 0.65s;
}

h1 span {
--color: var(--red);
color: var(--color);
position: relative;
clip-path: inset(-20% 0);
animation-name: text-reveal, shimmy;
animation-duration: var(--speed);
animation-delay: calc((0.5 + var(--index)) * (var(--speed) / 3));
animation-fill-mode: both;
animation-timing-function: steps(1), ease-out;
}

@keyframes shimmy {
0% {
transform: translateX(-1ch);
}
}

@keyframes text-reveal {
0% {
color: transparent;
}
50%, 100% {
color: var(--color);
}
}

h1 span:after {
content: "";
position: absolute;
inset: -20% 0;
background-color: var(--color);
animation-name: block-reveal;
animation-duration: var(--speed);
animation-delay: calc((0.5 + var(--index)) * (var(--speed) / 3));
animation-fill-mode: both;
}

@keyframes block-reveal {
0% {
transform: translateX(-110%);
}
45%, 55% {
transform: translateX(0);
}
100% {
transform: translateX(110%);
}
}

h1 span:nth-of-type(1) {
--color: var(--green);
--index: 0;
}

h1 span:nth-of-type(2) {
--color: var(--yellow);
--index: 1;
}

h1 span:nth-of-type(3) {
--color: var(--red);
--index: 2;
}
</style>
<h1>
<span>Here</span>
<span>we</span>
<span>gooooo!</span>
</h1>
[/html]

0

Поделиться18216.09.22 15:37:36

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<style>
.skeleton {
--surface: hsl(0 0% 90%);
--block: hsl(280 80% 80%);
--loader: hsl(35 100% 80%);
--padding: 1rem;
padding: var(--padding);
border-radius: calc(var(--padding) * 1.5);
gap: calc(var(--padding) * 0.5);
width: clamp(200px, 50vmin, 20rem);
display: grid;
grid-template: 1fr 1fr / 25% 1fr;
background: var(--surface);
}

.skeleton__block {
background: linear-gradient(
-75deg,
transparent 40%,
var(--loader),
transparent 60%
) 0 0 / 200% 100%,
var(--block);
border-radius: calc(var(--padding) * 0.5);
animation: load 2s infinite linear;
background-attachment: fixed;
}

.skeleton__block img {width: 50px;
padding: 3px;
border-radius: 8px;
filter: grayscale(1);}
.skeleton__block img:hover{
filter: none;}

@keyframes load {
to {
background-position: 200% 0;
}
}

.skeleton__block:first-of-type {
grid-row: 1 / -1;
aspect-ratio: 1;
}

.skeleton__block:last-of-type {
width: 65%;
}
</style>

<div class="skeleton">
<div class="skeleton__block"><img src='https://forumavatars.ru/img/avatars/0018/62/1b/2-1662459246.png'></div>
<div class="skeleton__block">Lorem ipsum </div>
<div class="skeleton__block">Lorem ipsum dolor sit amet</div>
</div>
<div class="skeleton">
<div class="skeleton__block"></div>
<div class="skeleton__block"></div>
<div class="skeleton__block"></div>
</div>
<div class="skeleton">
<div class="skeleton__block"></div>
<div class="skeleton__block"></div>
<div class="skeleton__block"></div>
</div>

[/html]

0

Поделиться18303.10.22 10:54:25

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<style>
button5 {
--b: 3px; /* border thickness */
--s: .15em; /* size of the corner */
--c: #BD5532;

padding: calc(.05em + var(--s)) calc(.3em + var(--s));
color: var(--c);
--_p: var(--s);
background:
conic-gradient(from 90deg at var(--b) var(--b),#0000 90deg,var(--c) 0)
var(--_p) var(--_p)/calc(100% - var(--b) - 2*var(--_p)) calc(100% - var(--b) - 2*var(--_p));
transition: .3s linear, color 0s, background-color 0s;
outline: var(--b) solid #0000;
outline-offset: .2em;
}
button5:hover,
button5:focus-visible{
--_p: 0px;
outline-color: var(--c);
outline-offset: .05em;
}
button5:active {
background: var(--c);
color: #fff;
}

button5 {
font-family: system-ui, sans-serif;
font-weight: bold;
font-size: 4rem;
cursor: pointer;
border: none;
margin: .1em;
}

container5 {
width: 500px;
height: 500px;
padding: 50px;
}
</style>
<script>

</script>
<container5>
<button5>Button</button5>
<button5 style="--c: #373B44;--b: 5px;--s:12px">Button</button5>
</container5>

[/html]

0

Поделиться18403.10.22 13:37:41

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<style>
.gallery {
display: grid;
width: min(800px,100%); /* control the size here */
margin: 50px auto;
grid: repeat(4,1fr)/repeat(6,1fr);
aspect-ratio: 6/4;
}
.gallery img {
height: 100%;
width: 100%;
object-fit: cover;
cursor: pointer;
filter: grayscale(30%);
transition: .3s;
}
.gallery:hover img {
filter: grayscale()
}
.gallery img:hover {
filter: grayscale(0%)
}
.gallery img:nth-child(1) {
grid-area: 1/1/span 2/span 2;
clip-path: polygon(0 0,100% 0,0 100%);
}
.gallery img:nth-child(2) {
grid-area: 1/2/span 3/span 3;
clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);
transform: translate(calc(50%/-3))
}
.gallery img:nth-child(3) {
grid-area: span 4/span 4/-1/-1;
clip-path: polygon(0 0,100% 0,100% 100%);
}
.gallery img:nth-child(4),
.gallery img:nth-child(5){
grid-area: span 2/1/-1/span 2;
clip-path: polygon(25% 0,100% calc(300%/5),50% 100%,0 100%,0 calc(100%/5));
min-height: 125%;
place-self: end;
}
.gallery img:nth-child(5) {
grid-area: span 2/span 5/-1/-1;
clip-path: polygon(50% 0,100% 100%,0 100%);
}

body {
background: #E3AAD6;
}
</style>
<script>

</script>

[/html]

0

Поделиться18505.10.22 12:36:12

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

text-shadow: 2px 10px #ffd20e, 2px 12px #000, 4px 20px #e5bc08, 4px 22px #000, 6px 30px #ec8401, 6px 32px #000, 8px 40px #e65c04, 8px 42px #000, 10px 50px #e52e06, 10px 52px #000, 12px 60px #de006b, 12px 62px #000, 14px 70px #ca039e, 14px 72px #000, 16px 80px #a203cb, 16px 82px #000, 18px 90px #6d01c9, 18px 92px #000, 20px 100px #22008f, 20px 102px #000, 22px 110px #062f9a, 22px 112px #000, 24px 120px #0045ac, 24px 122px #000, 26px 130px #007db2, 26px 132px #000, 28px 140px #00b8d9, 28px 142px #000;
}

0

Поделиться18605.10.22 14:25:15

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<style>
:root {
--color-core-primary: #60659d;
--color-core-tertiary: #7a609d;
--color-core-bg: #fff;
--color-avatars-background: #f8f9fa;
}

.avatars {
--gap: 0.35em;
--avatar-size: 5em;
--overlap-size: 2em;
--hover-overlap-size: 4em; /* Best to keep lower than --avatar-size so that there is still some overlap on hover */
--border-size: 0.4em;
--num-children: 4; /* Value is automatically updated based on the number of children. See :has() below. Does not work in Firefox though. */
--num-children-1: calc(var(--num-children) - 1);

background: var(--color-avatars-background);
border-radius: var(--avatar-size);

display: grid;
gap: var(--gap);
padding: var(--gap);

grid-auto-flow: column;
grid-template-columns: repeat(var(--num-children), var(--grid-cell-size-to-use));
/* grid-auto-columns: var(--grid-cell-size-to-use); */
width: calc(var(--grid-cell-size-to-use) * var(--num-children-1) + var(--gap) * var(--num-children) + var(--avatar-size) + var(--border-size));
transition: all ease-in-out 0.25s;

border: calc(var(--border-size) / 2) solid rgb(0 0 0 / 0.3);
}

.avatars {
--grid-cell-size-to-use: var(--overlap-size);
}

:is( /* Wrapped in an :is() to not break Firefox which does not support :has() */
.avatars:hover,
.avatars:not(hover):has(> :focus) /* Also grow when tabbing into the list */
) {
--grid-cell-size-to-use: var(--hover-overlap-size, var(--avatar-size));
}

.avatars > * {
width: var(--avatar-size);
aspect-ratio: 1;
height: auto;

clip-path: circle(calc(var(--avatar-size) / 2 + var(--border-size) * 2));
outline: none;
}

.avatars img {
width: 100%;
height: auto;

--border-color: var(--color-core-primary);
outline: var(--border-size) solid var(--border-color);
outline-offset: calc(var(--border-size) * -2 + 1px); /* 1px extra to cater for rounding errors */

border: var(--border-size) solid var(--color-avatars-background);
border-radius: var(--avatar-size);

transition: all ease-in-out 0.15s;
}

.avatars :is(:hover, :focus) > img {
--border-color: var(--color-core-tertiary);
scale: 1.1;
}

/* Update --num-children based on the number of children .avatars has */
.avatars:where(:has(> *:nth-of-type(1):last-child)) {
--num-children: 1;
}
.avatars:where(:has(> *:nth-of-type(2):last-child)) {
--num-children: 2;
}
.avatars:where(:has(> *:nth-of-type(3):last-child)) {
--num-children: 3;
}
.avatars:where(:has(> *:nth-of-type(4):last-child)) {
--num-children: 4;
}
.avatars:where(:has(> *:nth-of-type(5):last-child)) {
--num-children: 5;
}

/* General styles */
body {
display: grid;
place-content: center;
}

p {
text-align: center;
}

html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background: var(--color-core-bg);
}
</style>

[/html]

0

Поделиться18706.10.22 13:17:48

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<style>
.spook {
position: relative;
z-index: 10;
display: flex;
padding: 16px 32px;
font-size: 24px;
font-weight: 600;
align-items: flex-end;
font-family: Arial, Helvetica, sans-serif;
border-radius: 12px;
background-color: black;
transition: all 50ms ease-in;
transform: scale(0.8);
color: white;
margin-left: 300px; }

cursor: pointer; }
.spook__icon {
margin-right: 8px;
}
.spooky__container {
position: absolute;
height: 20px;
width: 20px;
left: 45px;
top: 0;
}

.candy {
transform: scale(0.1);
border-radius: 50%;
left: 0;
pointer-events: none;
position: fixed;
top: 0;
width: 40px;
height: 30px;
background-color: red;}
.candy::before {
content: "";
position: absolute;
z-index: -1;
top: 50%;
transform: translateY(-50%);
right: -15px;
display: block;
width: 50%;
height: 50%;
border-top: 10px solid transparent;
border-right: 20px solid orangered;
border-bottom: 10px solid transparent;
}
.candy::after {
content: "";
position: absolute;
z-index: -1;
top: 50%;
transform: translateY(-50%);
left: -15px;
display: block;
width: 50%;
height: 50%;
border-top: 10px solid transparent;
border-left: 20px solid orangered;
border-bottom: 10px solid transparent;
}

</style>
<script>
const button = document.querySelector(".spook");
const spawner = document.querySelector(".spooky__container");

const pop = (e) => {
shrink(button);
const radians = (Math.PI * 2) / 20;
for (let index = 0; index < 40; index++) {
x = e.clientX + Math.cos(radians * index);
y = e.clientY + Math.sin(radians * index);
generateCandy(x, y);
}
};

const destinationX = x + (Math.random() - 0.5) * 4 * 75;
const destinationY = y + -Math.random() * 4 * 75;
// console.log(destinationX, destinationY);

const shrink = (elt) => {
elt.style.transform = "scale(0.7)";
elt.style.background = "orange";
setTimeout(() => {
elt.style.transform = "scale(0.8)";
elt.style.background = "black";
}, 200);
};

if (document.body.animate) {
button.addEventListener("click", pop);
}

</script>

<container style="padding: 300px;"><br><br><br><br><br><br><br><br>
<button class="spook">
<svg width="44" height="40" viewBox="0 0 44 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="spook__icon">
<path d="M20.7826 0.48629L22.9565 2.0024C22.9565 2.0024 21.372 2.57094 22.1546 7.3088C22.9372 12.0467 23.8067 12.8047 23.8067 12.8047H18.7633C18.7633 12.8047 16.7859 10.8148 18.3478 5.50841C19.9098 0.202015 20.7826 0.48629 20.7826 0.48629Z" fill="#005E3C" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M28.7826 40H14.3478H12.6957V39.8975C5.54975 39.0047 0 32.3911 0 24.3651C0 15.7301 6.42374 8.73016 14.3478 8.73016C16.9792 8.73016 19.445 9.50204 21.5652 10.8493C23.6854 9.50204 26.1513 8.73016 28.7826 8.73016C36.7067 8.73016 43.1304 15.7301 43.1304 24.3651C43.1304 32.8415 36.9403 39.7425 29.2174 39.993V40H28.7826Z" fill="#FF7629" />
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="8" width="44" height="32">
<path clip-rule="evenodd" d="M28.7826 40H14.3478H12.6957V39.8975C5.54975 39.0047 0 32.3911 0 24.3651C0 15.7301 6.42374 8.73016 14.3478 8.73016C16.9792 8.73016 19.445 9.50204 21.5652 10.8493C23.6854 9.50204 26.1513 8.73016 28.7826 8.73016C36.7067 8.73016 43.1304 15.7301 43.1304 24.3651C43.1304 32.8415 36.9403 39.7425 29.2174 39.993V40H28.7826Z" fill-rule="evenodd" fill="#FF7629" />
</mask>
<g mask="url(#mask0)">
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M21.6522 41.7056C28.6896 41.7056 34.6087 34.1262 34.6087 24.4598C34.6087 14.7935 28.6896 7.21404 21.6522 7.21404C14.6148 7.21404 8.69565 14.7935 8.69565 24.4598C8.69565 34.1262 14.6148 41.7056 21.6522 41.7056ZM21.6522 42.4637C29.1921 42.4637 35.3043 34.4031 35.3043 24.4598C35.3043 14.5166 29.1921 6.45599 21.6522 6.45599C14.1123 6.45599 8 14.5166 8 24.4598C8 34.4031 14.1123 42.4637 21.6522 42.4637Z" fill="#FF0000" />
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M24.4907 36.9727C25.3633 33.8031 25.9131 29.3789 25.9131 24.4598C25.9131 19.5407 25.3633 15.1166 24.4907 11.947C24.0531 10.3574 23.5458 9.12623 23.0141 8.30938C22.4696 7.47283 21.9993 7.21404 21.6522 7.21404C21.3051 7.21404 20.8348 7.47283 20.2903 8.30938C19.7586 9.12623 19.2513 10.3574 18.8137 11.947C17.9411 15.1166 17.3913 19.5407 17.3913 24.4598C17.3913 29.3789 17.9411 33.8031 18.8137 36.9727C19.2513 38.5623 19.7586 39.7934 20.2903 40.6103C20.8348 41.4468 21.3051 41.7056 21.6522 41.7056C21.9993 41.7056 22.4696 41.4468 23.0141 40.6103C23.5458 39.7934 24.0531 38.5623 24.4907 36.9727ZM21.6522 42.4637C24.3896 42.4637 26.6087 34.4031 26.6087 24.4598C26.6087 14.5166 24.3896 6.45599 21.6522 6.45599C18.9148 6.45599 16.6957 14.5166 16.6957 24.4598C16.6957 34.4031 18.9148 42.4637 21.6522 42.4637Z" fill="#FF0000" />
</g>
<path d="M22.9404 2.09594C22.7599 2.52393 22.023 2.57516 21.2944 2.21038C20.5657 1.84559 20.1214 1.20292 20.3018 0.774938C20.4823 0.346952 21.2192 0.295716 21.9478 0.660501C22.6764 1.02529 23.1208 1.66795 22.9404 2.09594Z" fill="#005D3C" />
<path d="M22.6126 1.93187C22.4769 2.25355 21.9231 2.29206 21.3754 2.01788C20.8278 1.74371 20.4938 1.26068 20.6294 0.938999C20.7651 0.617323 21.3189 0.578814 21.8666 0.852988C22.4142 1.12716 22.7482 1.61019 22.6126 1.93187Z" fill="#003220" />
<path d="M11.3043 15.3632L19.4782 20.48H11.3043V15.3632Z" fill="#FFDE9E" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.3043 15.3632V20.48H19.4782L11.3043 15.3632ZM11.4782 15.6906V20.2905H18.8264L11.4782 15.6906Z" fill="url(#paint0_linear)" />
<path d="M32.174 15.3632L24 20.48H32.174V15.3632Z" fill="#FFDE9E" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M32.174 15.3632V20.48H24L32.174 15.3632ZM32 15.6906V20.2905H24.6519L32 15.6906Z" fill="url(#paint1_linear)" />
<path d="M12.8695 30.619C12.8695 29.8341 13.4535 29.1977 14.1739 29.1977H29.1304C29.8507 29.1977 30.4347 29.8341 30.4347 30.619V30.619C30.4347 31.404 29.8507 32.0404 29.1304 32.0404H14.1739C13.4535 32.0404 12.8695 31.404 12.8695 30.619V30.619Z" fill="url(#paint2_linear)" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M29.1304 29.3872H14.1739C13.5495 29.3872 13.0434 29.9387 13.0434 30.619C13.0434 31.2994 13.5495 31.8509 14.1739 31.8509H29.1304C29.7547 31.8509 30.2608 31.2994 30.2608 30.619C30.2608 29.9387 29.7547 29.3872 29.1304 29.3872ZM14.1739 29.1977C13.4535 29.1977 12.8695 29.8341 12.8695 30.619C12.8695 31.404 13.4535 32.0404 14.1739 32.0404H29.1304C29.8507 32.0404 30.4347 31.404 30.4347 30.619C30.4347 29.8341 29.8507 29.1977 29.1304 29.1977H14.1739Z" fill="url(#paint3_linear)" />
<defs>
<linearGradient id="paint0_linear" x1="15.3913" y1="15.3632" x2="15.3913" y2="20.48" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF5C00" />
<stop offset="1" stop-color="#5C2100" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint1_linear" x1="28.087" y1="15.3632" x2="28.087" y2="20.48" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF5C00" />
<stop offset="1" stop-color="#5C2100" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint2_linear" x1="21.6521" y1="29.1977" x2="21.6521" y2="32.0404" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFDE9E" />
<stop offset="1" stop-color="#FFE1A6" />
</linearGradient>
<linearGradient id="paint3_linear" x1="21.6521" y1="29.1977" x2="21.6521" y2="32.0404" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF5C00" />
<stop offset="1" stop-color="#5C2100" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
<div class="spooky__container"></div>
Click me!
</button>
<br><br><br><br><br>
</container>
[/html]

0

Поделиться18814.10.22 11:46:43

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<style>
body
{
margin:0;
padding:0;
font-family: 'Montserrat Alternates', sans-serif;
}
*
{
padding:0;
margin:0;
}
section {
padding: 100px 0;
}

.shadow3 {
background-image: url("http://www.commixturesoft.com/img/shadow3.png");
background-repeat: no-repeat;
}

.height450{height:450px;}

.badge-info {
background-color: rgba(23, 160, 184, 0.17);
color: #17a2b8;
}

.section-title .badge {
margin: 0 0 8px;
}
.badge {
border-radius: 100px;
font-size: 12px;
font-stretch: normal;
font-style: normal;
font-weight: 500;
letter-spacing: 1px;
line-height: normal;
padding: 4px 14px;
text-transform: uppercase;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
color: #3f345f;
}

h2 {
font-size: 36px;
}

.social-overlap {
position: absolute;
width: 100%;
transform: translateY(-50%);
}

.justify-content-center {
-ms-flex-pack: center!important;
justify-content: center!important;
}
.justify-content-center {
-webkit-box-pack: center!important;
-ms-flex-pack: center!important;
justify-content: center!important;
}

.social-bar {
display: flex;
border-radius: 10px;
background: #fff;
box-shadow: 0 0 60px rgba(93, 70, 232, 0.15);
border: 1px solid#ebe9e9;
}
.iconpad {
padding: 12px 0;
width: 100%;
}
.mb-3, .my-3 {
margin-bottom: 1rem!important;
}

.process-scetion .slider-nav-item {
position: relative;
flex-grow: 0;
flex-shrink: 0;
border-radius: 50%;
text-align: center;
background: #fff;
cursor: pointer;
transition: all .4s ease;
}

.social-icons a {
border-radius: 50px;
color: #3f345f;
display: inline-block;
line-height: 52px;
height: 50px;
width: 50px;
box-shadow: 0 5px 25px rgba(93, 70, 232, 0.15);
margin: 15px 15px;
font-size: 22px;
}

a {
text-decoration: none !important;
color: #3f345f;
transition: all 0.3s ease 0s;
}

.slider-nav-item:before {
position: absolute;
content: "";
height: calc(100% + 16px);
width: calc(100% + 16px);
top: -8px;
left: -8px;
border-radius: 50%;
border: 1px solid rgba(132, 132, 164, 0.35);
animation: 1.5s linear 0s normal none infinite focuse;
}

/*socil*/
.slider-nav{
display: flex;
}

.process-scetion .slider-nav-item {
position: relative;
flex-grow: 0;
flex-shrink: 0;
border-radius: 50%;
text-align: center;
background: #fff;
cursor: pointer;
transition: all .4s ease;

}
.slider-nav-item:before
{
position: absolute;
content: "";
height: calc(100% + 16px);
width: calc(100% + 16px);
top: -8px;
left: -8px;
border-radius: 50%;
border: 1px solid rgba(132, 132, 164, 0.35);
animation: 1.5s linear 0s normal none infinite focuse;
}

.process-scetion .slider-nav-item:nth-child(2) {
color: #40beff; }
.process-scetion .slider-nav-item:nth-child(3) {
color: #311f9b; }
.process-scetion .slider-nav-item:nth-child(4) {
color: #ff9259; }
.process-scetion .slider-nav-item:nth-child(5) {
color: #38385f; }
.process-scetion .slider-nav-item:after {
position: absolute;
top: 50%;
left: 100%;
height: 2px;
content: '';
width: 100%;
background: url(http://demo.themenio.com/ico/assets/images/line.png) repeat 0 0;
z-index: 0;
animation: slide 1s linear infinite; }
.process-scetion .slider-nav-item:last-child:after {
display: none; }
.process-scetion .slider-nav-item .ikon {
font-size: 50px;
line-height: 80px; }

.process-scetion .slider-nav-item.active:before {
position: absolute;
content: "";
height: calc(100% + 16px);
width: calc(100% + 16px);
top: -8px;
left: -8px;
border-radius: 50%;
border: 1px solid rgba(132, 132, 164, 0.35);
animation: 1.5s linear 0s normal none infinite focuse; }

@keyframes focuse {
0% {
transform: scale(0.8);
opacity: 1; }
75% {
transform: scale(1.2);
opacity: 0; }
100% {
transform: scale(1.2);
opacity: 0; } }
@keyframes slide {
from {
background-position: 0 0; }
to {
background-position: 40px 0; } }

.shadow-img1{
background-image:url("../img/shadow.png");
background-repeat:no-repeat;
background-position:bottom;
}

.shadow-img2{
background-position: bottom;
background-image: url("../img/shadow2.png");
background-size: 100%;
background-repeat: no-repeat;
}

.slider-nav-item:after {
position: absolute;
top: 50%;
left: 100%;
height: 2px;
content: '';
width: 100%;
background: url(https://1.bp.blogspot.com/--Btu5p654jU/ … 0/line.png) repeat 0 0;
z-index: 0;
animation: slide 1s linear infinite;
}
.mt100{margin-top:100px;}

/* ----------------------------------------------
* Generated by Animista on 2019-9-24 11:37:28
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

/**
* ----------------------------------------
* animation jello-horizontal
* ----------------------------------------
*/
@-webkit-keyframes jello-horizontal {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
}
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
}
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
}
65% {
-webkit-transform: scale3d(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.95, 1);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes jello-horizontal {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
}
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
}
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
}
65% {
-webkit-transform: scale3d(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.95, 1);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}

.jello-horizontal {
-webkit-animation: jello-horizontal 0.9s both;
animation: jello-horizontal 0.9s both;
}

.social-bar a:hover i
{
-webkit-animation: jello-horizontal 0.9s both;
animation: jello-horizontal 0.9s both;
}

@media only screen and (max-width: 300px) {
.process-scetion .slider-nav-item
{
height: 30px;
width: 30px;
margin: 15px 10px;
line-height: 28px;
}
}
</style>
<script>

</script>

<section class="trial-block shadow3" id="ContactUs">
<div class="height450">
<div class="section-title text-center">
<span class="badge badge-info">Get Started</span>
<h2>Social Link</h2>
<span class="section-title-line section-title-line"></span>
</div>
<div class="social-overlap process-scetion mt100">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10">
<div class="social-bar">
<div class="social-icons mb-3 iconpad text-center">

<a class="slider-nav-item"><i class="fab fa-facebook"></i></a>
<a class="slider-nav-item"><i class="fab fa-google-plus"></i></a>
<a class="slider-nav-item"><i class="fab fa-twitter"></i></a>
<a href="https://www.youtube.com/watch?v=_XiOcsj3oNI&t=50s" target="_blank" class="slider-nav-item"><i class="fab fa-instagram"></i></a>
<a href="https://www.youtube.com/watch?v=_XiOcsj3oNI&t=50s" target="_blank" class="slider-nav-item"><i class="fab fa-linkedin"></i></a>
<a target="_blank" class="slider-nav-item"><i class="fab fa-pinterest"></i></a>
<a href="https://www.youtube.com/watch?v=_XiOcsj3oNI&t=50s" target="_blank" class="slider-nav-item"><i class="fab fa-skype"></i></a>
<a href="#" class="slider-nav-item"><i class="fab fa-youtube"></i></a>
<a href="#" class="behance slider-nav-item"><i class="fab fa-behance"></i></a>
<a href="https://www.youtube.com/watch?v=_XiOcsj3oNI&t=50s" target="_blank" class="slider-nav-item"><i class="fab fa-dribbble"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
[/html]

0

Поделиться18914.10.22 12:12:29

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<style>
body {
background: rgb(191, 76, 76);
}

/* slider
----------------------*/
.slide-wrap {
margin: 0% auto 0;
width: 50%;
}
.slide-mask {
position: relative;
overflow: hidden;
height: 130px;
}
.slide-group {
position: absolute;
top: 0px;
left: 0;
width: 100%;
}
.slide {
height: 130px;
font: 100 90px/135px "lato";
font-size: 2em;
color: #fff;
text-align: center;
text-transform: uppercase;
}

/* nav
----------------------*/
.slide-nav {
text-align: center;
}
.slide-nav ul {
margin: 0;
padding: 0;
}
.slide-nav li {
display: inline-block;
width: 10px;
height: 10px;
background: rgb(175, 56, 56);
cursor: pointer;
margin-left: .5em;
}
.slide-nav li.current {
background: rgb(144, 39, 39);
}
</style>
<script>

var $slide = $('.slide'),
$slideGroup = $('.slide-group'),
$bullet = $('.bullet');

var slidesTotal = ($slide.length - 1),
current = 0,
isAutoSliding = true;

$bullet.first().addClass('current');

var clickSlide = function() {
//stop auto sliding
window.clearInterval(autoSlide);
isAutoSliding = false;

var slideIndex = $bullet.index($(this));

updateIndex(slideIndex);
};

var updateIndex = function(currentSlide) {
if(isAutoSliding) {
if(current === slidesTotal) {
current = 0;
} else {
current++;
}
} else {
current = currentSlide;
}

$bullet.removeClass('current');
$bullet.eq(current).addClass('current');

transition(current);
};

var transition = function(slidePosition) {
$slideGroup.animate({
'top': '-' + slidePosition + '00%'
});
};

$bullet.on( 'click', clickSlide);

var autoSlide = window.setInterval(updateIndex, 2000);

</script>

<div class="slide-wrap">
<div class="slide-mask">
<ul class="slide-group">
<li class="slide">this</li>
<li class="slide">is</li>
<li class="slide">a</li>
<li class="slide">simple</li>
<li class="slide">slider</li>
</ul>
</div>

<div class="slide-nav">
<ul>
<li class="bullet"></li>
<li class="bullet"></li>
<li class="bullet"></li>
<li class="bullet"></li>
<li class="bullet"></li>
</ul>
</div>
</div>

[/html]

0

Поделиться19017.10.22 15:30:27

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<style>
@import url("https://fonts.googleapis.com/css?family=Varela+Round");
html {
box-sizing: border-box;
}

*,
*:before,
*:after {
box-sizing: inherit;
padding: 0;
margin: 0;
letter-spacing: 1.1px;
}

body,
html {
width: 100%;
height: 100%;
background: #1c1d22;
font-family: "Varela Round", sans-serif;
}

.menu {
display: flex;
justify-content: center;
align-items: center;
max-width: 720px;
margin: 0 auto;
height: 100vh;
list-style: none;
}

.menu li {
width: 125px;
height: 50px;
transition: background-position-x 0.9s linear;
text-align: center;

a {
font-size: 22px;
color: #777;
text-decoration: none;
transition: all 0.45s;
}

&:hover {
background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEi%0D%0AIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhs%0D%0AaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB3aWR0%0D%0AaD0iMzkwcHgiIGhlaWdodD0iNTBweCIgdmlld0JveD0iMCAwIDM5MCA1MCIgZW5hYmxlLWJhY2tn%0D%0Acm91bmQ9Im5ldyAwIDAgMzkwIDUwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBhdGggZmlsbD0i%0D%0Abm9uZSIgc3Ryb2tlPSIjZDk0ZjVjIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLW1pdGVybGlt%0D%0AaXQ9IjEwIiBkPSJNMCw0Ny41ODVjMCwwLDk3LjUsMCwxMzAsMAoJYzEzLjc1LDAsMjguNzQtMzgu%0D%0ANzc4LDQ2LjE2OC0xOS40MTZDMTkyLjY2OSw0Ni41LDI0My42MDMsNDcuNTg1LDI2MCw0Ny41ODVj%0D%0AMzEuODIxLDAsMTMwLDAsMTMwLDAiLz4KPC9zdmc+Cg==");
animation: line 1s;
}

&:hover a {
color: #d94f5c;
}

&:not(:last-child) {
margin-right: 30px;
}
}

@keyframes line {
0% {
background-position-x: 390px;
}
}

</style>
<nav>
<ul class="menu">
<li><a href="#!">Home</a></li>
<li><a href="#!">About</a></li>
<li><a href="#!">Contact</a></li>
<li><a href="#!">Faq</a></li>
</ul>
</nav>

[/html]

0

Поделиться19117.10.22 15:41:15

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<style>
main {
display: block;
position: relative;
box-sizing: border-box;
padding: 30px;
width: 100%;
background-color: #fff;
margin: 0 auto;
margin-top: 50px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
background-image: url(https://i.imgur.com/khglonO.jpg);
background-size: cover;
background-repeat: no-repeat;
}

.live-search-box {
width: 100%;
display: block;
padding: 1em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #3498db;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

.topic {
padding: 20px;
padding-top: 0px;
padding-bottom: 0px;
border-bottom: solid 1px #ebebeb;
}

.open {
cursor: pointer;
display: block;
padding: 0px;
background: #ffffffa8;
}

.open:hover {
opacity: 0.7;
}

.expanded {
background-color: #f5f5f5;
transition: all .3s ease-in-out;
}

.ptag {
display: none;
}

.question {
padding-top: 30px;
padding-right: 40px;
padding-bottom: 20px;
font-size: 18px;
font-weight: 500;
color: #526ee4;
}

.answer {
font-size: 16px;
line-height: 26px;
display: none;
margin-bottom: 30px;
text-align: justify;
padding-left: 20px;
padding-right: 20px;
}

.faq-t {
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
display: inline-block;
float: right;
position: relative;
top: -55px;
right: 10px;
width: 10px;
height: 10px;
background: transparent;
border-left: 2px solid #ccc;
border-bottom: 2px solid #ccc;
transition: all .3s ease-in-out;
}

.faq-o {
top: -50px;
-moz-transform: rotate(-224deg);
-ms-transform: rotate(-224deg);
-webkit-transform: rotate(-224deg);
transform: rotate(-224deg);
}
</style>
<script>
$(".open").click(function() {
var container = $(this).parents(".topic");
var answer = container.find(".answer");
var trigger = container.find(".faq-t");

answer.slideToggle(200);

if (trigger.hasClass("faq-o")) {
trigger.removeClass("faq-o");
} else {
trigger.addClass("faq-o");
}

if (container.hasClass("expanded")) {
container.removeClass("expanded");
} else {
container.addClass("expanded");
}
});

jQuery(document).ready(function($) {
$('.question').each(function() {
$(this).attr('data-search-term', $(this).text().toLowerCase() + $(this).find("ptag").text().toLowerCase());

});

$('.live-search-box').on('keyup', function() {

var searchTerm = $(this).val().toLowerCase();

$('.question').each(function() {

if ($(this).filter('[data-search-term *= ' + searchTerm + ']').length > 0 || searchTerm.length < 1) {
$(this).parent().parent().show();
} else {
$(this).parent().parent().hide();
}

});

});
</script>
<main>
<div class="topic">

<h2 class="question">1. How can i delete my complaint/comment?<span class="ptag">SIEBEL</span></h2>
<span class="faq-t"></span>
</div>
<p class="answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="topic">
<div class="open">
<h2 class="question">2. I have posted a complaint/comment, but it doesn’t appear on the website. Why? When my complaint will be posted?
</h2><span class="faq-t"></span>
</div>
<p class="answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="topic">
<div class="open">
<h2 class="question">3. How can I edit a complaint I posted?
</h2><span class="faq-t"></span>
</div>
<p class="answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="topic">
<div class="open">
<h2 class="question">4. How can i find out personal information of another user?
</h2><span class="faq-t"></span>
</div>
<p class="answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="topic">
<div class="open">
<h2 class="question">5. How can i contact another user?
</h2><span class="faq-t"></span>
</div>
<p class="answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="topic">
<div class="open">
<h2 class="question">2. I have posted a complaint/comment, but it doesn’t appear on the website. Why? When my complaint will be posted?
</h2><span class="faq-t"></span>
</div>
<p class="answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="topic">
<div class="open">
<h2 class="question">3. How can I edit a complaint I posted?
</h2><span class="faq-t"></span>
</div>
<p class="answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="topic">
<div class="open">
<h2 class="question">4. How can i find out personal information of another user?
</h2><span class="faq-t"></span>
</div>
<p class="answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="topic">
<div class="open">
<h2 class="question">5. How can i contact another user?
</h2><span class="faq-t"></span>
</div>
<p class="answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</main>
[/html]

0

Поделиться19217.10.22 15:46:17

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<style>
.shape-top{
display: block;
float: left;
height: 90px;
width: 100%;
background: url('');
}
.shape-top ul{
width: 100%;
text-align: center;
}
.shape-top ul li{
display: inline-block;
font: none;
}
.shape-top ul li a{
display: inline-block;
font: none;
color: #f178b0;
padding: 24px 40px;
font-size: 18px;
text-decoration: none;
position: relative;
}
.shape-top ul li a:after{
content: "";
position: absolute;
right: 40%;
top: 4px;
width: 16px;
height: 16px;
background: #f178b0;
border-radius: 50%;
opacity: 0;
}
.shape-top ul li a:before{
content: "";
position: absolute;
right: 40%;
top: 24px;
width: 8px;
height: 8px;
background: #f178b0;
border-radius: 50%;
opacity: 0;
}
.shape-top ul li a.active:before{
animation: bubbles infinite 2s linear;
}
.shape-top ul li a.active:after{
animation: bubbles infinite 3s linear;
}
.shape-top ul li a:hover:before{
animation: bubbles infinite 2s linear;
}
.shape-top ul li a:hover:after{
animation: bubbles infinite 3s linear;
}
@keyframes bubbles{
from{
opacity: 0;
top: 40px;
}
20%{
opacity: 0.5;
top: 20px;
}
70%{

opacity: 1;
top: 0px;
}
70%{

opacity: 0;
top: -10px;
}
100%{
opacity: 0;
top: -20px;
}
}

</style>
<nav class="shape-top">
<ul>
<li>
<a href="#" class="active" title="Home">Home</a>
</li>
<li>
<a href="#" title="Home">The Brand</a>
</li>
<li>
<a href="#" title="Home">Products</a>
</li>
<li>
<a href="#" title="Home">Faq</a>
</li>
<li>
<a href="#" title="Home">Contact</a>
</li>
</ul>
</nav>

[/html]

[html]<style>

/*настройка блока меню*/
.shape-top{
display: block;
float: left;
height: 90px;
width: 100%;
background: url(''); /*сюда можно вставить картинку, заменить на цвет*/
}
.shape-top ul{
width: 100%;
text-align: center;
}
.shape-top ul li{
display: inline-block;
font: none;
}
/*внешний вид ссылок в меню*/
.shape-top ul li a{
display: inline-block;
font: none;
color: #f178b0;
padding: 24px 40px;
font-size: 18px;
text-decoration: none;
position: relative;
}

/*настройка анимации*/
/*настройка анимации шарика перед ссылкой*/
.shape-top ul li a:after{
content: "";
position: absolute;
right: 40%; /*позиция относительно правого края */
top: 4px; /*позиция относительно верха*/
width: 16px; /*ширина плавающего блока шарика*/
height: 16px; /*высота шарика*/
background: #f178b0; /*цвет шарика*/
border-radius: 50%; /*округление шарика, превращение квадрата в шарик*/
opacity: 0; /*стартовая видимость шарика*/
}
/*настройка анимации шарика после ссылки*/
.shape-top ul li a:before{
content: "";
position: absolute;
right: 40%; /*позиция относительно правого края */
top: 24px; /*позиция относительно верха*/
width: 8px; /*ширина плавающего блока шарика*/
height: 8px; /*высота шарика*/
background: #f178b0; /*цвет шарика*/
border-radius: 50%; /*округление шарика, превращение квадрата в шарик*/
opacity: 0; /*стартовая видимость шарика*/
}

/*скорость движения шарика*/
.shape-top ul li a.active:before{
animation: bubbles infinite 2s linear;
}
.shape-top ul li a.active:after{
animation: bubbles infinite 3s linear;
}
.shape-top ul li a:hover:before{
animation: bubbles infinite 2s linear;
}
.shape-top ul li a:hover:after{
animation: bubbles infinite 3s linear;
}
/*анимация движения шарика*/
@keyframes bubbles{
from{
opacity: 0;
top: 40px;
}
20%{
opacity: 0.5;
top: 20px;
}
70%{

opacity: 1;
top: 0px;
}
70%{

opacity: 0;
top: -10px;
}
100%{
opacity: 0;
top: -20px;
}
}

</style>

<nav class="shape-top">
<ul>
<li>
<a href="#" class="active" title="Home">Home</a>
</li>
<li>
<a href="#" title="Home">The Brand</a>
</li>
<li>
<a href="#" title="Home">Products</a>
</li>
<li>
<a href="#" title="Home">Faq</a>
</li>
<li>
<a href="#" title="Home">Contact</a>
</li>
</ul>
</nav>[/html]

0

Поделиться19318.10.22 08:44:41

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<style>
* {
box-sizing: border-box;
}
:root {
--background-color: black;
--text-color: hsl(0, 0%, 100%);
}
body {
margin: 0;
}
.wrapper {
display: grid;
place-content: center;
background-color: var(--background-color);
min-height: 100vh;
font-family: "Oswald", sans-serif;
font-size: clamp(1.5rem, 1rem + 18vw, 15rem);
font-weight: 700;
text-transform: uppercase;
color: var(--text-color);
}

.wrapper > div {
grid-area: 1/1/-1/-1;
}
.top3 {
clip-path: polygon(0% 0%, 100% 0%, 100% 48%, 0% 58%);
}
.bottom {
clip-path: polygon(0% 60%, 100% 50%, 100% 100%, 0% 100%);
color: transparent;
background: -webkit-linear-gradient(177deg, black 53%, var(--text-color) 65%);
background: linear-gradient(177deg, black 53%, var(--text-color) 65%);
background-clip: text;
-webkit-background-clip: text;
transform: translateX(-0.02em);
}

</style>
<section class="wrapper">
<div class="top3">Sliced</div>
<div class="bottom" aria-hidden="true">Sliced</div>
</section>

[/html]

0

Поделиться19418.10.22 12:10:32

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<style>
#menu {
width: 800px;
height: 120px;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
}

nav ul {
list-style: none;
overflow: hidden;
position: relative;
}

nav ul li {
float: left;
margin: 0 20px 0 0;
}

nav ul li a {
display: block;
width: 120px;
height: 120px;
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/499416/icons.png");
background-repeat: no-repeat;
border-radius: 4px;
}

nav ul li:nth-child(1) a {
background-color: #5BB2FC;
background-position: 28px 28px;
}

nav ul li:nth-child(2) a {
background-color: #58EBD3;
background-position: 28px -96px;
}

nav ul li:nth-child(3) a {
background-color: #FFA659;
background-position: 28px -222px;
}

nav ul li:nth-child(4) a {
background-color: #FF7A85;
background-position: 28px -342px;
}

nav ul li:nth-child(1) a:hover, nav ul li:nth-child(2) a:hover, nav ul li:nth-child(3) a:hover, nav ul li:nth-child(4) a:hover {
opacity: 0.8;
}

nav ul li a span {
font: 50px "Dosis", sans-serif;
text-transform: uppercase;
position: absolute;
left: 580px;
top: 29px;
visibility: hidden;
}

nav ul li a:hover span {
visibility: visible;
}

nav ul li:nth-child(1) a span {
color: #5BB2FC;
}

nav ul li:nth-child(2) a span {
color: #58EBD3;
}

nav ul li:nth-child(3) a span {
color: #FFA659;
}

nav ul li:nth-child(4) a span {
color: #FF7A85;
}
</style>
<div id="menu">
<nav>
<ul>
<li>
<a href="#">
<span>Home</span>
</a>
</li>
<li>
<a href="#">
<span>About</span>
</a>
</li>
<li>
<a href="#">
<span>Portfolio</span>
</a>
</li>
<li>
<a href="#">
<span>Contact</span>
</a>
</li>

</ul>
</nav>
</div>

[/html]

0

Поделиться19518.10.22 12:39:27

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<style>
:root {
--background-color: black;
--text-color: hsl(0, 0%, 100%);
}
.wrapper {
display: grid;
place-content: center;
background-color: var(--background-color);
min-height: 100vh;
font-family: "Oswald", sans-serif;
font-size: clamp(1.5rem, 1rem + 18vw, 15rem);
font-weight: 700;
text-transform: uppercase;
color: var(--text-color);
}

.wrapper > div {
grid-area: 1/1/-1/-1;
}
.top3 {
clip-path: polygon(0% 0%, 100% 0%, 100% 48%, 0% 58%);
}
.bottom {
clip-path: polygon(0% 60%, 100% 50%, 100% 100%, 0% 100%);
color: transparent;
background: -webkit-linear-gradient(177deg, black 53%, var(--text-color) 65%);
background: linear-gradient(177deg, black 53%, var(--text-color) 65%);
background-clip: text;
-webkit-background-clip: text;
transform: translateX(-0.02em);
}

</style>

<section class="wrapper">
<div class="top3">Sliced</div>
<div><img src='https://i.gifer.com/5362.gif' style="position: absolute;margin: 80px 60px 0px 65px;clip-path: polygon(-7.67% 7.5%, 140.23% -0.84%, 100% 100%, 0% 100%);"></div>
<div class="bottom" aria-hidden="true">Sliced</div>
</section>

[/html]

0

Поделиться19619.10.22 08:39:30

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
background: rgb(30,30,30);
overflow: hidden;
}

#C{
}
</style>
<script>
window.onload = function () {
let ctx = document.getElementById("C"),
c = ctx.getContext("2d"),
w,
h;
fitCanvas();

function dist(A, B) {
return Math.sqrt(Math.pow(B.x - A.x, 2) + Math.pow(B.y - A.y, 2));
}
class node {
constructor(x, y) {
this.x = x;
this.y = y;
this.neigh = [];

this.f = 0.01;

this.ax = 0;
this.ay = 0;
this.vx = 0;
this.vy = 0;
this.rm = false;
this.invincibletimer = 100;
}
align() {
if (this.neigh[0] && this.neigh[1]) {
let tx = (this.neigh[0].x + this.neigh[1].x) / 2,
ty = (this.neigh[0].y + this.neigh[1].y) / 2;
let d = dist(this, { x: tx, y: ty }),
a = Math.atan2(ty - this.y, tx - this.x);
if (d != 0) {
this.ax += (d / 4) * Math.cos(a);
this.ay += (d / 4) * Math.sin(a);
}
}
}
move() {
this.vx += this.ax * t;
this.vy += this.ay * t;

this.vx *= 0.1;
this.vy *= 0.1;

this.x += this.vx * t;
this.y += this.vy * t;

this.ax = 0;
this.ay = 0;
if(this.invincibletimer > 0){
this.invincibletimer--;
}
}
repulse(other) {
let d = dist(this, other),
a = Math.atan2(this.y - other.y, this.x - other.x);
if (other != this.neigh[0] && other != this.neigh[1]) {
if (d < repulse_d) {
this.ax += (d/20) * Math.cos(a);
this.ay += (d/20) * Math.sin(a);
}
}
}
attract() {
for (let i = 0; i < 2; i++) {
if (this.neigh[i]) {
let d = dist(this, this.neigh[i]),
a = Math.atan2(this.neigh[i].y - this.y, this.neigh[i].x - this.x);
if (d > res) {
this.ax += this.f * Math.cos(a);
this.ay += this.f * Math.sin(a);
}
if (d < res) {
this.ax -= this.f * Math.cos(a);
this.ay -= this.f * Math.sin(a);
}
}
}
}
readytoremove(){
let d0,d1,a0,a1,da, tda1, tda2;
d0 = dist(this,this.neigh[0]);
d1 = dist(this,this.neigh[1]);
a0 = Math.atan2(this.neigh[0].y-this.y,this.neigh[0].x-this.x);
a1 = Math.atan2(this.neigh[1].y-this.y,this.neigh[1].x-this.x);

tda1 = Math.abs(a1-a0)*180/Math.PI;
tda2 = (2*Math.PI-Math.abs(a0-a1))*180/Math.PI;

if(tda1 < tda2){
da = tda1;
}else{
da = tda2;
}

if(da > 180-0.05 && da < 180+0.05 && this.invincibletimer <= 0){
this.rm = true;
}
}
show(size) {
c.beginPath();
c.fillStyle = "grey";
c.fillRect(this.x - size / 2, this.y - size / 2, size, size);
}
}
class path {
constructor() {
this.nodes = [];
for(let i = 0, len = 180; i < len; i++){
this.nodes.push(new node(w / 2 + 100*Math.cos(i*2*Math.PI/len), h / 2 + 100*Math.sin(i*2*Math.PI/len)));
}
this.maxr = res;
let ni, li;
for (let i = 0, len = this.nodes.length; i < len; i++) {
if (i == 0) {
li = len - 1;
ni = i + 1;
} else if (i == len - 1) {
ni = 0;
li = i - 1;
} else {
li = i - 1;
ni = i + 1;
}
this.nodes[i].neigh.push(this.nodes[li]);
this.nodes[i].neigh.push(this.nodes[ni]);
}
}
update() {
let ni, li;
for (let i = 0, len = this.nodes.length; i < len; i++) {
if (i == 0) {
this.nodes[i].neigh = [];
}
if (i == 0) {
li = len - 1;
ni = i + 1;
} else if (i == len - 1) {
ni = 0;
li = i - 1;
} else {
li = i - 1;
ni = i + 1;
}
this.nodes[i].neigh[0] = this.nodes[li];
this.nodes[i].neigh[1] = this.nodes[ni];
}
}
addrandom() {
let x, y, ri;
if (Math.random() < 0.9) {
ri = Math.round(Math.random() * (this.nodes.length - 2));
x = (this.nodes[ri].x + this.nodes[ri + 1].x) / 2;
y = (this.nodes[ri].y + this.nodes[ri + 1].y) / 2;
this.nodes.splice(ri + 1, 0, new node(x, y));
}
}
move() {
for (let i = 0, len = this.nodes.length; i < len; i++) {
this.nodes[i].attract();
for (let j = 0, lenj = this.nodes.length; j < lenj; j++) {
if (i != j) {
this.nodes[i].repulse(this.nodes[j]);
}
}
this.nodes[i].align();
this.nodes[i].move();
}
}
subdivide() {
let d, x, y, ni;
for (let i = 0, len = this.nodes.length; i < len; i++) {
if(i == len-1){
ni = 0;
}else{
ni = i+1;
}
d = dist(this.nodes[i], this.nodes[ni]);
x = (this.nodes[i].x + this.nodes[ni].x) / 2;
y = (this.nodes[i].y + this.nodes[ni].y) / 2;
if (d > this.maxr) {
if(i == len-1){
this.nodes.push(new node(x, y));
}else{
this.nodes.splice(i + 1, 0, new node(x, y));
}
len++;
}
}
}
mark_redundant(){
for (let i = 0, len = this.nodes.length; i < len; i++) {
this.nodes[i].readytoremove();
}
}
remove_redundant(){
for (let i = 0, len = this.nodes.length; i < len; i++) {
if(this.nodes[i].rm){
this.nodes.splice(i,1);
len = this.nodes.length;
i--;
}
}
}
show() {
c.beginPath();
for (let i = 0, len = this.nodes.length; i < len; i++) {
c.lineTo(this.nodes[i].x, this.nodes[i].y);
}
c.fillStyle = "white";
c.closePath();
c.fill();
// for (let i = 0, len = this.nodes.length; i < len; i++) {
// this.nodes[i].show(2);
// }
}
}

let t = 2,
res = 10,
repulse_d = 10,
p = new path(),
then,
now,
elapsed;

function fitCanvas() {
w = ctx.width = window.innerWidth;
h = ctx.height = window.innerHeight;
}
function loop() {
fitCanvas();
draw();
window.requestAnimationFrame(loop);
}
window.requestAnimationFrame(loop);
};

</script>
<canvas id="C"></canvas>
[/html]

0

Поделиться19719.10.22 09:20:18

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

https://fffuel.co/gggrain/
[html]<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="0 0 700 700" width="700" height="700"><defs><linearGradient gradientTransform="rotate(-150, 0.5, 0.5)" x1="50%" y1="0%" x2="50%" y2="100%" id="gggrain-gradient2"><stop stop-color="hsl(194, 83%, 49%)" stop-opacity="1" offset="-0%"></stop><stop stop-color="rgba(255,255,255,0)" stop-opacity="0" offset="100%"></stop></linearGradient><linearGradient gradientTransform="rotate(150, 0.5, 0.5)" x1="50%" y1="0%" x2="50%" y2="100%" id="gggrain-gradient3"><stop stop-color="hsl(227, 100%, 50%)" stop-opacity="1"></stop><stop stop-color="rgba(255,255,255,0)" stop-opacity="0" offset="100%"></stop></linearGradient><filter id="gggrain-filter" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feTurbulence type="fractalNoise" baseFrequency="0.55" numOctaves="2" seed="2" stitchTiles="stitch" x="0%" y="0%" width="100%" height="100%" result="turbulence"></feTurbulence>
<feColorMatrix type="saturate" values="0" x="0%" y="0%" width="100%" height="100%" in="turbulence" result="colormatrix"></feColorMatrix>
<feComponentTransfer x="0%" y="0%" width="100%" height="100%" in="colormatrix" result="componentTransfer">
<feFuncR type="linear" slope="3"></feFuncR>
<feFuncG type="linear" slope="3"></feFuncG>
<feFuncB type="linear" slope="3"></feFuncB>
</feComponentTransfer>
<feColorMatrix x="0%" y="0%" width="100%" height="100%" in="componentTransfer" result="colormatrix2" type="matrix" values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 19 -11"></feColorMatrix>
</filter></defs><g><rect width="100%" height="100%" fill="hsl(0, 100%, 60%)"></rect><rect width="100%" height="100%" fill="url(#gggrain-gradient3)"></rect><rect width="100%" height="100%" fill="url(#gggrain-gradient2)"></rect><rect width="100%" height="100%" fill="transparent" filter="url(#gggrain-filter)" opacity="1" style="mix-blend-mode: soft-light"></rect></g></svg>[/html]

0

Поделиться19819.10.22 09:53:42

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]<style>
.container-audio {
width: 66%;
height: auto;
padding: 20px;
border-radius: 5px;
background-color: #eee;
color: #444;
margin: 20px auto;
overflow: hidden;
}
</style>
<script>

</script>

[/html]

0

Поделиться19919.10.22 12:58:17

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<style>
.music {
display: inline-flex;
align-items: center;
justify-content: space-between;
position: relative;
width: 300px;
height: 200px;
}

.music .bar {
width: 12px;
height: 2px;
border-radius: 10px;
background-color: white;
animation: up_down 1.5s ease-in-out infinite;
}

@keyframes up_down {
0%,
100% {
height: 2px;
}
50% {
height: 80px;
}
}

.music .bar:nth-child(1) {
background-color: purple;
animation-delay: 1s;
}

.music .bar:nth-child(2) {
background-color: crimson;
animation-delay: 0.8s;
}

.music .bar:nth-child(3) {
background-color: deeppink;
animation-delay: 0.6s;
}

.music .bar:nth-child(4) {
background-color: orange;
animation-delay: 0.4s;
}

.music .bar:nth-child(5) {
background-color: gold;
animation-delay: 0.2s;
}

.music .bar:nth-child(6) {
background-color: gold;
animation-delay: 0.2s;
}

.music .bar:nth-child(7) {
background-color: orange;
animation-delay: 0.4s;
}

.music .bar:nth-child(8) {
background-color: deeppink;
animation-delay: 0.6s;
}

.music .bar:nth-child(9) {
background-color: crimson;
animation-delay: 0.8s;
}

.music .bar:nth-child(10) {
background-color: purple;
animation-delay: 1s;
}
</style>
<div class='music'>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
</div>

[/html]

0

Поделиться20019.10.22 15:01:05

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]<style>
svg {
height: 400px;
width: 500px;
}
svg:hover {
cursor: pointer;
}
/* GHOST ========================= */

.ghost-1 {
fill: #f5f5f5;
}

.ghost-2 {
fill: #263238;
}

.ghost-3 {
fill: #f8bbcf;
}

.ghost-4 {
fill: #00695C;
}

#_02-ghost {
position: relative;
left: 0px;
}

#ghost {
animation: floaty 1.75s infinite;
}

#shadow {
animation: shadow 1.75s infinite;
transform-origin: 50% 50%;
}

@keyframes shadow {
0% {
transform: scale(0.9);
}

50% {
transform: scale(1);
}

100% {
transform: scale(0.9);
}
}

@keyframes floaty {
0% {
transform: translateY(25px);
}

50% {
transform: translateY(0px);
}

100% {
transform: translateY(25px);
}
}

</style>

atBounds = () => {
if (movingRight) {
if (ghost.getBoundingClientRect().right >= max) {
return true;
}
} else {
if (ghost.getBoundingClientRect().right < max) {
return true;
}
}
return false;
}

move = () => setTimeout(() => {
if (!atBounds()) {
ghost.style.left = String((parseInt(ghost.style.left) || 0) + side) + 'px';
}
if (side > 0) {
ghost.style.transform = 'rotateY(180deg)';
ghost.style.transformOrigin = '50% 50%';
} else {
ghost.style.transform = 'rotateY(0deg)';
ghost.style.transformOrigin = '0% 0%';
}
move();
}, 1);

document.onmousemove = e => {
movingRight = e.screenX > (document.documentElement.clientWidth / 2);
max = e.screenX;

if (atBounds()) {
side = 0;
return;
}

side = e.screenX > (document.documentElement.clientWidth / 2) ? 2 : -2;
}

move();
</script>

[/html]

0

Поделиться20119.10.22 15:26:00

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<style>
html, body {
width: 100%;
height: 100%;
}

.scene {
width: 100%;
height: 100%;
overflow: hidden;
background: url(https://s3-us-west-2.amazonaws.com/s.cd … ghosts.jpg) no-repeat center center;
background-size: cover;
}

.ghost-track {
position: absolute;
left: 0;
top: 60%;
width: 100%;
height: 60px;
margin-top: -60px;

div {
position: absolute;
left: -100px;
bottom: 0;
width: 100px;
height: 60px;
background-image: url(https://s3-us-west-2.amazonaws.com/s.cd … sprite.png);
background-position: 0px 0px;
background-size: 100% auto;
opacity: 0;
transform-origin: 50% 100%;
}
}

// credits box styles
.credits {
position: absolute;
bottom: 10px;
right: 10px;
padding: 5px 10px;
background-color: rgba(0,0,0,0.5);
color: #fff;
font-size: 12px;
border-radius: 3px;

a {
color: #77a4b7;
text-decoration: none;
font-weight: bold;
}
}
</style>
<script>
// options
var options = {
speed: 0.3,
stretch: 1.5,
spacing: 50
}

// some more global vars
var w = window,
scene = document.querySelector('.scene'),
track = document.createElement('div'),
ghosts = [],
first_ghost = true; // first ghost has a special bg image

// add ghost track to correct vertical position (60% down the full image, not always 60% down the screen)
// need to find ratio of bg image to screen
function positionTrack() {
var image_ratio = 1125/1500,
screen_ratio = w.innerHeight/w.innerWidth;
if (screen_ratio > image_ratio) {
track.style.top = 0.6*w.innerHeight + 'px';
} else {
track.style.top = 0.6*1125 - (1125-w.innerHeight)/2 + 'px';
}
}
positionTrack();
window.addEventListener('resize', function(event){
// reposition on window resize
positionTrack();
});

// now add track to scene
track.className = 'ghost-track';
scene.appendChild(track);

function addGhost() {
// only add a new ghost if previous ghost has advanced enough
var prev_ghost = ghosts[ghosts.length-1];
if (!prev_ghost || prev_ghost.pos > options.spacing) {
//add new ghost
var g = new Array();
g.el = document.createElement('div');
g.pos = 0; // start offscreen
g.speed = (Math.random() - 0.5)*0.2 + options.speed; // vary speed by +/-0.05
g.stretch_counter = Math.floor(Math.random()*40); // used for stretch

// pick random background image sprite, 9 options
var img_pos = Math.ceil(Math.random()*9) * 60; // sprite height is 60
if (first_ghost) {
// first ghost gets a special bg image
img_pos = 0;
}
g.el.style.backgroundPosition = '0 -' + img_pos + 'px';

ghosts.push(g);
track.appendChild(g.el);

updateGhost(g);
g.el.style.opacity = 1;

first_ghost = false; // only one first ghost
}
}

function removeGhost(index) {
// remove element and reference
track.removeChild(ghosts[index].el);
ghosts.splice(index, 1);
}

function updateGhost(index) {
var g = ghosts[index];
if (g == undefined) return;

// increment position and stretch
g.pos += g.speed;
g.stretch_counter++;

// if ghost is out of window, remove
if (g.pos > (w.innerWidth + 200)) {
removeGhost(index);
return;
}

// calculate new stretch amount
// should vary between 1 and 1.3 (if options.stretch is 3)
// divide count by slowing factor to increase period
var scale_y = 1 + (Math.sin(g.stretch_counter/40) + 0.8)*options.stretch/10;

var t = 'translateX( ' + g.pos + 'px ) scaleY(' + scale_y + ')';
g.el.style.webkitTransform = t;
g.el.style.MozTransform = t;
g.el.style.oTransform = t;
g.el.style.transform = t;
}

function animate() {
// update all ghosts
for (var n = 0; n < ghosts.length; n++) {
updateGhost(n);
}

// check if we should add a ghost once per cycle
addGhost();

requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

</script>
<div class="scene"></div>
<div class="credits">
From <a href="http://www.sssscomic.com/comic.php?page=536">Stand Still Stay Silent</a> by Minna Sundberg
</div>

[/html]

0

Поделиться20219.10.22 15:45:20

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
var currentY = '';
var movementConstant = .015;

$(document).mousemove(function(e) { if(currentY == '') currentY = e.pageY;

var ydiff = e.pageY - currentY;
currentY = e.pageY;

$('.parallax div').each(function(i, el) { var movement = (i + 1) * (ydiff * movementConstant);

</head>

[/html]

0

Поделиться20320.10.22 11:02:32

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]<style>

.bg {
position: absolute;
margin: auto;
cursor: pointer;
top:0; bottom:0;
left:0; right:0;
width: 300px;
height: 200px;
background: url(https://i.pinimg.com/564x/2b/cd/f2/2bcd … cdd86f.jpg) no-repeat center;
background-size: contain;
}

.bg1 { filter: url('#heat'); }
.bg2 { filter: url('#parallax'); }
.bg3 { filter: url('#blur'); }

#label {
position: absolute;
margin: auto;
top:0; bottom:0;
left:0; right:0;
width: 200px;
height: 100px;
text-align: center;
font-size: 100px;
font-family: sans-serif;
color: white;
opacity: 0.3;
}
</style>
<script>

var filters = ['bg1', 'bg2', 'bg3'];
var labels = ['HEAT', 'PARALLAX', 'BLUR'];
var img = document.getElementById("img");
var lbl = document.getElementById("label");
var sel = 1;

img.onclick = function() {
img.className = 'bg ' + filters[sel];
lbl.innerHTML = labels[sel++];
if (sel == 3) {
sel = 0;
}
}
</script>
<div class="bg bg1" id="img">
<h1 id="label">Текст</h1>
</div>

0

Поделиться20424.10.22 09:58:40

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<style>
* {
box-sizing: border-box;
margin: 0; padding: 0;
}
body {
font-family: 'Roboto', sans-serif;
color: rgb(85,75,85);
background-color: rgb(255,255,255);
}
h1 {
padding: 50px 0;
font-size: 45px;
text-align: center;
color: rgb(54, 56, 55);
}
:active, :hover, :focus {
outline: 0!important;
outline-offset: 0;
}
::before,
::after {
position: absolute;
content: "";
}

.btn-holder {
display: flex;
flex-wrap: wrap;
justify-content: center;
max-width: 1000px;
margin: 10px auto 35px;
}
.btn {
position: relative;
display: inline-block;
width: auto; height: auto;
background-color: transparent;
border: none;
cursor: pointer;
margin: 0px 25px 15px;
min-width: 150px;
}
.btn span {
position: relative;
display: inline-block;
font-size: 14px;
font-weight: bold;
letter-spacing: 2px;
text-transform: uppercase;
top: 0; left: 0;
width: 100%;
padding: 15px 20px;
transition: 0.3s;
}

/*--- btn-1 ---*/
.btn-1::before {
background-color: rgb(28, 31, 30);
transition: 0.3s ease-out;
}
.btn-1 span {
color: rgb(255,255,255);
border: 1px solid rgb(28, 31, 30);
transition: 0.2s 0.1s;
}
.btn-1 span:hover {
color: rgb(28, 31, 30);
transition: 0.2s 0.1s;
}

/* 1.hover-filled-slide-down */
.btn.hover-filled-slide-down::before {
bottom: 0; left: 0; right: 0;
height: 100%; width: 100%;
}
.btn.hover-filled-slide-down:hover::before {
height: 0%;
}

/* 2.hover-filled-slide-up */
.btn.hover-filled-slide-up::before {
top: 0; left: 0; right: 0;
height: 100%; width: 100%;
}
.btn.hover-filled-slide-up:hover::before {
height: 0%;
}

/* 3.hover-filled-slide-left */
.btn.hover-filled-slide-left::before {
top: 0; bottom: 0; left: 0;
height: 100%; width: 100%;
}
.btn.hover-filled-slide-left:hover::before {
width: 0%;
}

/* 4. hover-filled-slide-right */
.btn.hover-filled-slide-right::before {
top:0; bottom: 0; right: 0;
height: 100%; width: 100%;
}
.btn.hover-filled-slide-right:hover::before {
width: 0%;
}

/* 5. hover-filled-opacity */
.btn.hover-filled-opacity::before {
top:0; bottom: 0; right: 0;
height: 100%; width: 100%;
opacity: 1;
}
.btn.hover-filled-opacity:hover::before {
opacity: 0;
}

/*--- btn-2 ---*/
.btn-2::before {
background-color: rgb(28, 31, 30);
transition: 0.3s ease-out;
}
.btn-2 span {
color: rgb(28, 31, 30);
border: 1px solid rgb(28, 31, 30);
transition: 0.2s;
}
.btn-2 span:hover {
color: rgb(255,255,255);
transition: 0.2s 0.1s;
}

/* 6. hover-slide-down */
.btn.hover-slide-down::before {
top: 0; left: 0; right: 0;
height: 0%; width: 100%;
}
.btn.hover-slide-down:hover::before {
height: 100%;
}

/* 7. hover-slide-up */
.btn.hover-slide-up::before {
bottom: 0; left: 0; right: 0;
height: 0%; width: 100%;
}
.btn.hover-slide-up:hover::before {
height: 100%;
}

/* 8. hover-slide-left */
.btn.hover-slide-left::before {
top: 0; bottom: 0; right: 0;
height: 100%; width: 0%;
}
.btn.hover-slide-left:hover::before {
width: 100%;
}

/* 9. hover-slide-right */
.btn.hover-slide-right::before {
top: 0; bottom: 0; left: 0;
height: 100%; width: 0%;
}
.btn.hover-slide-right:hover::before {
width: 100%;
}

/* 10. hover-opacity */
.btn.hover-opacity::before {
top:0; bottom: 0; right: 0;
height: 100%; width: 100%;
opacity: 0;
}
.btn.hover-opacity:hover::before {
opacity: 1;
}

/*--- btn-3 ---*/
.btn-3 {
padding: 5px;
}
.btn-3 span {
color: rgb(255, 255, 255);
background-color: rgb(54, 56, 55);
}
.btn-3::before,
.btn-3::after {
background: transparent;
z-index: 2;
}

/* 11. hover-border-1 */
.btn.hover-border-1::before,
.btn.hover-border-1::after {
width: 10%; height: 25%;
transition: 0.35s;
}
.btn.hover-border-1::before {
top: 0; left: 0;
border-left: 1px solid rgb(28, 31, 30);
border-top: 1px solid rgb(28, 31, 30);
}
.btn.hover-border-1::after {
bottom: 0; right: 0;
border-right: 1px solid rgb(28, 31, 30);
border-bottom: 1px solid rgb(28, 31, 30);
}
.btn.hover-border-1:hover::before,
.btn.hover-border-1:hover::after {
width: 99%;
height: 98%;
}

/* 12. hover-border-2 */
.btn.hover-border-2::before,
.btn.hover-border-2::after {
width: 10%; height: 25%;
transition: 0.35s;
}
.btn.hover-border-2::before {
bottom: 0; left: 0;
border-left: 1px solid rgb(28, 31, 30);
border-bottom: 1px solid rgb(28, 31, 30);
}
.btn.hover-border-2::after {
top: 0; right: 0;
border-right: 1px solid rgb(28, 31, 30);
border-top: 1px solid rgb(28, 31, 30);
}
.btn.hover-border-2:hover::before,
.btn.hover-border-2:hover::after {
width: 99%;
height: 99%;
}

/* 13. hover-border-3 */
.btn.hover-border-3::before,
.btn.hover-border-3::after {
width: 0%; height: 0%;
opacity: 0;
transition: width 0.2s 0.15s linear, height 0.15s linear, opacity 0s 0.35s;
}
.btn.hover-border-3::before {
top: 0; right: 0;
border-top: 1px solid rgb(28, 31, 30);
border-left: 1px solid rgb(28, 31, 30);
}
.btn.hover-border-3::after {
bottom: 0; left: 0;
border-bottom: 1px solid rgb(28, 31, 30);
border-right: 1px solid rgb(28, 31, 30);
}
.btn.hover-border-3:hover::before,
.btn.hover-border-3:hover::after {
width: 100%; height: 99%;
opacity: 1;
transition: width 0.2s linear, height 0.15s 0.2s linear, opacity 0s;
}

/* 14. hover-border-4 */
.btn.hover-border-4::before,
.btn.hover-border-4::after {
width: 0%; height: 0%;
opacity: 0;
transition: width 0.2s linear, height 0.15s 0.2s ease-out, opacity 0s 0.35s;
}
.btn.hover-border-4::before {
bottom: 0; left: -1px;
border-top: 1px solid rgb(28, 31, 30);
border-left: 1px solid rgb(28, 31, 30);
}
.btn.hover-border-4::after {
top: 0; right: 0;
border-bottom: 1px solid rgb(28, 31, 30);
border-right: 1px solid rgb(28, 31, 30);
}
.btn.hover-border-4:hover::before,
.btn.hover-border-4:hover::after {
width: 100%; height: 99%;
opacity: 1;
transition: width 0.2s 0.15s ease-out, height 0.15s ease-in, opacity 0s;
}

/* 15. hover-border-5 */
.btn.hover-border-5::before,
.btn.hover-border-5::after {
width: 0%; height: 0%;
opacity: 0;
}
.btn.hover-border-5::before {
top: 0; right: 0;
border-top: 1px solid rgb(28, 31, 30);
border-left: 1px solid rgb(28, 31, 30);
transition: width 0.2s 0.5s ease-out, height 0.15s 0.35s linear, opacity 0s 0.7s;
}
.btn.hover-border-5::after {
bottom: 0; left: 0px;
border-bottom: 1px solid rgb(28, 31, 30);
border-right: 1px solid rgb(28, 31, 30);
transition: width 0.2s 0.15s linear, height 0.15s ease-in, opacity 0s 0.35s;
}
.btn.hover-border-5:hover::before,
.btn.hover-border-5:hover::after {
width: 100%; height: 96%;
opacity: 1;
}
.btn.hover-border-5:hover::before {
transition: width 0.2s ease-in, height 0.15s 0.2s linear, opacity 0s; /* 1,2 */
}
.btn.hover-border-5:hover::after {
transition: width 0.2s 0.35s linear, height 0.15s 0.5s ease-out, opacity 0s 0.3s;
}

/*--- btn-4 ---*/
.btn-4 span {
color: rgb(28, 31, 30);
background-color: rgb(245,245,245);
}
.btn-4 span:hover {
color: rgb(54, 56, 55);
}
.btn-4::before,
.btn-4::after {
width: 15%; height: 2px;
background-color: rgb(54, 56, 55);
z-index: 2;
}

/* 16. hover-border-6 */
.btn.hover-border-6::before,
.btn.hover-border-6::after {
top: 0;
transition: width 0.2s 0.35s ease-out;
}
.btn.hover-border-6::before {
right: 50%;
}
.btn.hover-border-6::after {
left: 50%;
}
.btn.hover-border-6:hover::before,
.btn.hover-border-6:hover::after {
width: 50%;
transition: width 0.2s ease-in;
}

.btn.hover-border-6 span::before,
.btn.hover-border-6 span::after {
width: 0%; height: 0%;
background: transparent;
opacity: 0;
z-index: 2;
transition: width 0.2s ease-in, height 0.15s 0.2s linear, opacity 0s 0.35s;
}
.btn.hover-border-6 span::before {
top: 0; left: 0;
border-left: 2px solid rgb(54, 56, 55);
border-bottom: 2px solid rgb(54, 56, 55);
}
.btn.hover-border-6 span::after {
top: 0; right: 0;
border-right: 2px solid rgb(54, 56, 55);
border-bottom: 2px solid rgb(54, 56, 55);
}
.btn.hover-border-6 span:hover::before,
.btn.hover-border-6 span:hover::after {
width: 50%; height: 96%;
opacity: 1;
transition: height 0.2s 0.2s ease-in, width 0.2s 0.4s linear, opacity 0s 0.2s;
}

/* 17. hover-border-7 */
.btn.hover-border-7::before,
.btn.hover-border-7::after {
bottom: 0;
transition: width 0.2s 0.35s ease-out;
}
.btn.hover-border-7::before {
right: 50%;
}
.btn.hover-border-7::after {
left: 50%;
}
.btn.hover-border-7:hover::before,
.btn.hover-border-7:hover::after {
width: 50%;
transition: width 0.2s ease-in;
}

.btn.hover-border-7 span::before,
.btn.hover-border-7 span::after {
width: 0%; height: 0%;
background: transparent;
opacity: 0;
z-index: 2;
transition: width 0.2s ease-in, height 0.15s 0.2s linear, opacity 0s 0.35s;
}
.btn.hover-border-7 span::before {
bottom: 0; left: 0;
border-left: 2px solid rgb(54, 56, 55);
border-top: 2px solid rgb(54, 56, 55);
}
.btn.hover-border-7 span::after {
bottom: 0; right: 0;
border-right: 2px solid rgb(54, 56, 55);
border-top: 2px solid rgb(54, 56, 55);
}
.btn.hover-border-7 span:hover::before,
.btn.hover-border-7 span:hover::after {
width: 50%; height: 96%;
opacity: 1;
transition: height 0.2s 0.2s ease-in, width 0.2s 0.4s linear, opacity 0s 0.2s;
}

/* 18. hover-border-8 */
.btn.hover-border-8::before,
.btn.hover-border-8::after {
bottom: 0;
width: 15%;
transition: width 0.2s 0.35s ease-out;
}
.btn.hover-border-8::before {
right: 50%;
}
.btn.hover-border-8::after {
left: 50%;
}
.btn.hover-border-8:hover::before {
width: 50%;
transition: width 0.2s ease-in;
}
.btn.hover-border-8:hover::after {
width: 50%;
transition: width 0.1s ease-in;
}

.btn.hover-border-8 span::before,
.btn.hover-border-8 span::after {
width: 0%; height: 0%;
bottom: 0;
background: transparent;
opacity: 0;
z-index: 2;
}
.btn.hover-border-8 span::before {
left: 0%;
border-left: 2px solid rgb(54, 56, 55);
transition: height 0.25s ease-in, opacity 0s 0.35s;
}
.btn.hover-border-8 span:hover::before {
height: 96%;
opacity: 1;
transition: height 0.25s 0.2s ease-out, opacity 0s 0.2s;
}
.btn.hover-border-8 span::after {
right: 0%;
border-right: 2px solid rgb(54, 56, 55);
border-top: 2px solid rgb(54, 56, 55);
transition: width 0.2s ease-in, height 0.15s 0.2s linear, opacity 0s 0.35s;
}
.btn.hover-border-8 span:hover::after {
width: 99%; height: 96%;
opacity: 1;
transition: height 0.15s 0.1s linear, width 0.2s 0.25s linear, opacity 0s 0.1s;
}

/* 19. hover-border-9 */
.btn.hover-border-9::before,
.btn.hover-border-9::after {
bottom: 0;
width: 15%;
transition: width 0.2s 0.35s ease-out;
}
.btn.hover-border-9::before {
right: 50%;
}
.btn.hover-border-9::after {
left: 50%;
}
.btn.hover-border-9:hover::before {
width: 50%;
transition: width 0.1s ease-in;
}
.btn.hover-border-9:hover::after {
width: 50%;
transition: width 0.2s ease-in;
}

.btn.hover-border-9 span::before,
.btn.hover-border-9 span::after {
width: 0%; height: 0%;
bottom: 0;
background: transparent;
opacity: 0;
z-index: 2;
}
.btn.hover-border-9 span::after {
right: 0%;
border-right: 2px solid rgb(54, 56, 55);
transition: height 0.25s ease-in, opacity 0s 0.35s;
}
.btn.hover-border-9 span:hover::after {
height: 96%;
opacity: 1;
transition: height 0.25s 0.2s ease-out, opacity 0s 0.2s;
}
.btn.hover-border-9 span::before {
left: 0%;
border-left: 2px solid rgb(54, 56, 55);
border-top: 2px solid rgb(54, 56, 55);
transition: width 0.2s ease-in, height 0.15s 0.2s linear, opacity 0s 0.35s;
}
.btn.hover-border-9 span:hover::before {
width: 98.5%; height: 96%;
opacity: 1;
transition: height 0.15s 0.1s linear, width 0.2s 0.25s linear, opacity 0s 0.1s;
}

/* 20. hover-border-10 */
.btn.hover-border-10::before,
.btn.hover-border-10::after {
left: 0%;
height: 30%;
width: 2px;
transition: height 0.2s 0.35s ease-out;
}
.btn.hover-border-10::before {
top: 50%;
}
.btn.hover-border-10::after {
bottom: 50%;
}
.btn.hover-border-10:hover::before {
height: 50%;
transition: height 0.2s ease-in;
}
.btn.hover-border-10:hover::after {
height: 50%;
transition: height 0.1s ease-in;
}

.btn.hover-border-10 span::before,
.btn.hover-border-10 span::after {
width: 0%; height: 0%;
background: transparent;
opacity: 0;
z-index: 2;
}
.btn.hover-border-10 span::after {
bottom: 0; left: 0%;
border-bottom: 2px solid rgb(54, 56, 55);
transition: width 0.25s ease-in, opacity 0s 0.35s;
}
.btn.hover-border-10 span:hover::after {
width: 100%;
opacity: 1;
transition: width 0.25s 0.2s ease-out, opacity 0s 0.2s;
}
.btn.hover-border-10 span::before {
top: 0%; left: 0%;
border-top: 2px solid rgb(54, 56, 55);
border-right: 2px solid rgb(54, 56, 55);
transition: height 0.15s ease-in, width 0.2s 0.15s linear, opacity 0s 0.35s;
}
.btn.hover-border-10 span:hover::before {
width: 98.5%; height: 96%;
opacity: 1;
transition: width 0.2s 0.1s linear, height 0.15s 0.3s ease-out, opacity 0s 0.1s;
}

/*--- btn-5 ---*/
.btn-5 span {
color: rgb(28, 31, 30);
border: 2px solid rgb(249, 211, 27);
transition: 0.2s;
}
.btn-5 span:hover {
background-color: rgb(245,245,245);
}

/* 21. hover-border-11 */
.btn.hover-border-11::before,
.btn.hover-border-11::after {
width: 100%; height: 2px;
background-color: rgb(54, 56, 55);
z-index: 2;
transition: 0.35s;
}
.btn.hover-border-11::before {
top: 0; right: 0;
}
.btn.hover-border-11::after {
bottom: 0; left: 0;
}
.btn.hover-border-11:hover::before,
.btn.hover-border-11:hover::after {
width: 0%;
transition: 0.2s 0.2s ease-out;
}

.btn.hover-border-11 span::before,
.btn.hover-border-11 span::after {
width: 2px; height: 100%;
background-color: rgb(54, 56, 55);
z-index: 2;
transition: 0.25s;
}
.btn.hover-border-11 span::before {
bottom: 0; right: -2px;
}
.btn.hover-border-11 span::after {
top: 0; left: -2px;
}
.btn.hover-border-11 span:hover::before,
.btn.hover-border-11 span:hover::after {
height: 0%;
}

</style>
<h1>CSS buttons hover effects</h1>
<div class="btn-holder">
<button class="btn btn-1 hover-filled-slide-down">
<span>hover me</span>
</button>
<button class="btn btn-1 hover-filled-slide-up">
<span>hover me</span>
</button>
<button class="btn btn-1 hover-filled-slide-left">
<span>hover me</span>
</button>
<button class="btn btn-1 hover-filled-slide-right">
<span>hover me</span>
</button>
<button class="btn btn-1 hover-filled-opacity">
<span>hover me</span>
</button>
</div>
<div class="btn-holder">
<button class="btn btn-2 hover-slide-down">
<span>hover me</span>
</button>
<button class="btn btn-2 hover-slide-up">
<span>hover me</span>
</button>
<button class="btn btn-2 hover-slide-left">
<span>hover me</span>
</button>
<button class="btn btn-2 hover-slide-right">
<span>hover me</span>
</button>
<button class="btn btn-2 hover-opacity">
<span>hover me</span>
</button>
</div>
<div class='btn-holder'>
<button class="btn btn-3 hover-border-1">
<span>hover me</span>
</button>
<button class="btn btn-3 hover-border-2">
<span>hover me</span>
</button>
<button class="btn btn-3 hover-border-3">
<span>hover me</span>
</button>
<button class="btn btn-3 hover-border-4">
<span>hover me</span>
</button>
<button class="btn btn-3 hover-border-5">
<span>hover me</span>
</button>
</div>
<div class="btn-holder">
<button class="btn btn-4 hover-border-6">
<span>hover me</span>
</button>
<button class="btn btn-4 hover-border-7">
<span>hover me</span>
</button>
<button class="btn btn-4 hover-border-8">
<span>hover me</span>
</button>
<button class="btn btn-4 hover-border-9">
<span>hover me</span>
</button>
<button class="btn btn-4 hover-border-10">
<span>hover me</span>
</button>
</div>
<div class="btn-holder">
<button class="btn btn-5 hover-border-11">
<span>hover me</span>
</button>
</div>

[/html]

0

Поделиться20524.10.22 10:21:54

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<style>
@import url("https://fonts.googleapis.com/css2?family=Creepster&display=swap");

body {
--black: #353535;
--white: #ffffff;
--gray: #d9d9d9;
--green: #3c6e71;
--red: #ef6f6c;

height: 100vh;
margin: 0;
display: flex;
place-items: center;
justify-content: center;
background-color: var(--green);
font-family: "Creepster", cursive;
}

h1 {
color: var(--red);
text-align: center;
}

svg {
height: 50vh;
animation: floating 2s ease-in-out infinite alternate, fadeIn 0.5s ease-in-out;
opacity: 0.7;
}

svg:hover {
opacity: 0;
animation: fadeOut 0.5s ease-in-out;
}

@keyframes floating {
0% {
transform: translateY(0px);
}
100% {
transform: translateY(-20px);
}
}

@keyframes fadeOut {
from {
opacity: 0.7;
}
to {
opacity: 0;
}
}

@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 0.7;
}
}

/* Default svg styling */
.cls-1 {
fill: none;
}
.cls-2 {
clip-path: url(#clippath);
}
.cls-3 {
fill: var(--white);
}
.cls-4 {
fill: var(--black);
}
.cls-5 {
fill: var(--gray);
}

</style>
<div class="container">
<h1>Catch me... if you can!</h1>
<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" viewBox="0 0 577.53 797">
<defs>
<clipPath id="clippath">
<path d="M278.83,0c86.95,.46,154.85,53.35,188.24,103.32,27.13,40.6,34.93,84.43,48.12,158.52,8.15,45.82,2.79,39.83,12.74,103.32,14.14,90.26,19.8,240.13,31.14,266.09,2.64,6.03,19.6,44.37,18.4,86.34-.25,8.87-1.41,21.12-9.91,31.14-11.06,13.04-28.27,14.9-35.38,15.57-48.44,4.55-55.2-39.63-101.91-38.21-54.86,1.66-73.3,66.71-134.46,70.77-54,3.59-62.72-61.03-130.21-62.28-76.43-1.42-119.74,54.39-150.03,31.14C.04,753.8,.02,727.89,0,696.36c-.03-44.01,12.23-77,15.57-86.34,27.56-77.1,4.84-204.52,25.48-338.27,12.98-84.14,21.63-124.89,42.46-161.35C100.49,80.68,158.59-.63,278.83,0Z" class="cls-1" />
</clipPath>
</defs>
<g id="body">
<g class="cls-2">
<g>
<path d="M278.83,0c86.95,.46,154.85,53.35,188.24,103.32,27.13,40.6,34.93,84.43,48.12,158.52,8.15,45.82,2.79,39.83,12.74,103.32,14.14,90.26,19.8,240.13,31.14,266.09,2.64,6.03,19.6,44.37,18.4,86.34-.25,8.87-1.41,21.12-9.91,31.14-11.06,13.04-28.27,14.9-35.38,15.57-48.44,4.55-55.2-39.63-101.91-38.21-54.86,1.66-73.3,66.71-134.46,70.77-54,3.59-62.72-61.03-130.21-62.28-76.43-1.42-119.74,54.39-150.03,31.14C.04,753.8,.02,727.89,0,696.36c-.03-44.01,12.23-77,15.57-86.34,27.56-77.1,4.84-204.52,25.48-338.27,12.98-84.14,21.63-124.89,42.46-161.35C100.49,80.68,158.59-.63,278.83,0Z" class="cls-3" />
<path d="M184.86,16c5.51,10.31-41.08,42.03-70.55,125-32.25,90.79-21.41,179.37-17.64,207.82,9.81,73.96,34.52,126.84,45.86,150.6,30.13,63.12,50.73,71.37,78.79,138.55,21.72,51.99,38.77,92.82,28.22,121.98-22.9,63.31-179.26,81.03-268.11-9.04-119.23-120.87-106.77-425.63,0-590.34C56.45,44.85,176.57,.5,184.86,16Z" class="cls-5" />
<path d="m109.14 769.28 37.39-105c.14-.4.27-.81.39-1.24l11.65-42.12c2.58-9.35 9.61-9.19 12.08.27l15.01 57.49c.06.22.12.43.18.64l26.21 87.83c2.56 8.58-.62 19.28-5.78 19.45l-91.4 3.02c-5.51.18-8.83-11.61-5.73-20.33ZM381.86 755.61l34.59-97.14c.19-.55.37-1.11.53-1.7l9.31-33.67c3.54-12.79 13.14-12.57 16.52.37l12.81 49.05c.08.29.16.58.24.87l24.08 80.69c3.5 11.74-.84 26.38-7.91 26.61l-82.35 2.72c-7.54.25-12.08-15.88-7.84-27.81Z" class="cls-4" />
</g>
</g>
</g>
<ellipse id="l-eye" cx="211.24" cy="215.14" rx="45.21" ry="70.87" transform="translate(-42.11 51.67) rotate(-12.69)" />
<ellipse id="r-eye" cx="364.99" cy="224.82" rx="59.62" ry="45.21" transform="translate(78.56 543.75) rotate(-79.7)" />
<path id="mouth" d="M328.38,333.8c7.8,8.2,1.28,30.34-11.2,43.04-2.18,2.22-17.25,17.08-36.36,13.09-14.59-3.05-22.07-15.1-27.46-23.79-1.36-2.19-15.71-25.76-8.14-34.03,5.01-5.47,14.37,1.48,36.73,2.79,28.64,1.68,39.7-8.17,46.42-1.1Z" />
</svg>
</div>
[/html]

0

Поделиться20624.10.22 11:02:54

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<style>
body {
margin: 0;
background-image: linear-gradient(90deg, #201A35, #0B0320);
color: #fff;
font-family: sans-serif;
display: flex;
align-items: center;
min-height: 100vh;
}
.slider {
width: 100%;
}
.slider input {
display: none;
}
.testimonials {
display: flex;
align-items: center;
justify-content: center;
position: relative;
min-height: 350px;
perspective: 1000px;
overflow: hidden;
}
.testimonials .item {
width: 450px;
padding: 30px;
border-radius: 5px;
background-color: #0A0220;
position: absolute;
top: 0;
box-sizing: border-box;
text-align: center;
transition: transform 0.4s;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
user-select: none;
cursor: pointer;
}
.testimonials .item img {
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 50%;
border: 13px solid #3B344D;
}
.testimonials .item p {
color: #ddd;
}
.testimonials .item h2 {
font-size: 14px;
}
.dots {
display: flex;
justify-content: center;
align-items: center;
}
.dots label {
height: 5px;
width: 5px;
border-radius: 50%;
cursor: pointer;
background-color: #413B52;
margin: 7px;
transition-duration: 0.2s;
}

#t-1:checked ~ .dots label[for="t-1"],
#t-2:checked ~ .dots label[for="t-2"],
#t-3:checked ~ .dots label[for="t-3"],
#t-4:checked ~ .dots label[for="t-4"],
#t-5:checked ~ .dots label[for="t-5"] {
transform: scale(2);
background-color: #fff;
}
#t-1:checked ~ .dots label[for="t-2"],
#t-2:checked ~ .dots label[for="t-1"],
#t-2:checked ~ .dots label[for="t-3"],
#t-3:checked ~ .dots label[for="t-2"],
#t-3:checked ~ .dots label[for="t-4"],
#t-4:checked ~ .dots label[for="t-3"],
#t-4:checked ~ .dots label[for="t-5"],
#t-5:checked ~ .dots label[for="t-4"] {
transform: scale(1.5);
}
#t-1:checked ~ .testimonials label[for="t-3"],
#t-2:checked ~ .testimonials label[for="t-4"],
#t-3:checked ~ .testimonials label[for="t-5"],
#t-4:checked ~ .testimonials label[for="t-1"],
#t-5:checked ~ .testimonials label[for="t-2"] {
transform: translate3d(600px, 0, -180px) rotateY(-25deg);
z-index: 2;
}
#t-1:checked ~ .testimonials label[for="t-2"],
#t-2:checked ~ .testimonials label[for="t-3"],
#t-3:checked ~ .testimonials label[for="t-4"],
#t-4:checked ~ .testimonials label[for="t-5"],
#t-5:checked ~ .testimonials label[for="t-1"] {
transform: translate3d(300px, 0, -90px) rotateY(-15deg);
z-index: 3;
}
#t-2:checked ~ .testimonials label[for="t-1"],
#t-3:checked ~ .testimonials label[for="t-2"],
#t-4:checked ~ .testimonials label[for="t-3"],
#t-5:checked ~ .testimonials label[for="t-4"],
#t-1:checked ~ .testimonials label[for="t-5"] {
transform: translate3d(-300px, 0, -90px) rotateY(15deg);
z-index: 3;
}
#t-3:checked ~ .testimonials label[for="t-1"],
#t-4:checked ~ .testimonials label[for="t-2"],
#t-5:checked ~ .testimonials label[for="t-3"],
#t-2:checked ~ .testimonials label[for="t-5"],
#t-1:checked ~ .testimonials label[for="t-4"] {
transform: translate3d(-600px, 0, -180px) rotateY(25deg);
}
#t-1:checked ~ .testimonials label[for="t-1"],
#t-2:checked ~ .testimonials label[for="t-2"],
#t-3:checked ~ .testimonials label[for="t-3"],
#t-4:checked ~ .testimonials label[for="t-4"],
#t-5:checked ~ .testimonials label[for="t-4"],
#t-5:checked ~ .testimonials label[for="t-5"] {
z-index: 4;
}
</style>
<div class="slider">
<input type="radio" name="testimonial" id="t-1">
<input type="radio" name="testimonial" id="t-2">
<input type="radio" name="testimonial" id="t-3" checked>
<input type="radio" name="testimonial" id="t-4">
<input type="radio" name="testimonial" id="t-5">
<div class="testimonials">
<label class="item" for="t-1">
<img src="https://dummyimage.com/150" alt="picture">
<p>"Raw denim you probably haven't heard of them jean short austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse."</p>
<h2>- Princy, Web Developer</h2>
</label>
<label class="item" for="t-2">
<img src="https://dummyimage.com/150" alt="picture">
<p>"Raw denim you probably haven't heard of them jean short austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse."</p>
<h2>- Princy, Web Developer</h2>
</label>
<label class="item" for="t-3">
<img src="https://dummyimage.com/150" alt="picture">
<p>"Raw denim you probably haven't heard of them jean short austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse."</p>
<h2>- Princy, Web Developer</h2>
</label>
<label class="item" for="t-4">
<img src="https://dummyimage.com/150" alt="picture">
<p>"Raw denim you probably haven't heard of them jean short austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse."</p>
<h2>- Princy, Web Developer</h2>
</label>
<label class="item" for="t-5">
<img src="https://dummyimage.com/150" alt="picture">
<p>"Raw denim you probably haven't heard of them jean short austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse."</p>
<h2>- Princy, Web Developer</h2>
</label>
</div>
<div class="dots">
<label for="t-1"></label>
<label for="t-2"></label>
<label for="t-3"></label>
<label for="t-4"></label>
<label for="t-5"></label>
</div>
</div>
[/html]

0

Поделиться20725.10.22 10:53:26

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<style>
:root {
--sp: 2.5s; /* change speed */
}

body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(#222, #101010);
}

.content {
width: 50vmin;
height: 50vmin;
position: relative;
display: flex;
align-items: center;
justify-content: center;
transform: scale(0.65);
animation: spin-all calc(var(--sp) * 2) linear 0s infinite
}

.circle {
--in: 80%;
--ar: #ff9800;
--dt: #ffea34;
--shadow: drop-shadow(0vmin 0vmin 0.5vmin #000) drop-shadow(0vmin 1vmin 0.5vmin #0004);
--cross: linear-gradient(0deg, #fff0 calc(50% - 2px), #000 calc(50% - 1px) calc(50% + 1px), #fff0 calc(50% + 2px)), linear-gradient(90deg, #fff0 calc(50% - 2px), #000 calc(50% - 1px) calc(50% + 1px), #fff0 calc(50% + 2px));
border: 6vmin solid var(--ar);
width: var(--in);
height: var(--in);
border-radius: 100%;
position: absolute;
box-sizing: border-box;
border-top-color: #fff0;
border-left-color: #fff0;
top: 15vmin;
right: -10vmin;
animation: spin-bot var(--sp) ease 0s infinite;
background-image: var(--cross), radial-gradient(var(--dt) 5.5vmin, #fff0 calc(5.5vmin + 1px));
background-repeat: no-repeat;
background-size: 3vmin 1vmin, 1vmin 3vmin, 100% 100%;
background-position: center center;
filter: var(--shadow);
}

.circle:nth-child(2) {
--in: 60%;
top: -2vmin;
animation: spin-top var(--sp) ease 0s infinite;
transform: rotate(-45deg);
background-image: var(--cross), radial-gradient(var(--dt) 1.25vmin, #fff0 calc(1.25vmin + 1px));
right: -4vmin;
filter: hue-rotate(10deg) var(--shadow);
background-size: 1.4vmin 1vmin, 1vmin 1.4vmin, 100% 100%;
}

.circle:nth-child(3) {
--in: 100%;
top: -5vmin;
left: -13vmin;
transform: rotate(175deg);
animation: spin-left var(--sp) ease calc(var(--sp) / 4) infinite;
background-image: var(--cross), radial-gradient(var(--dt) 9vmin, #fff0 calc(9vmin + 1px));
filter: hue-rotate(20deg) var(--shadow);
background-size: 5vmin 1vmin, 1vmin 5vmin, 100% 100%;
}

.circle:nth-child(4) {
--in: 60%;
top: 35vmin;
left: -6vmin;
transform: rotate(-280deg);
animation: spin-last var(--sp) ease calc(calc(calc(var(--sp) / 4) + var(--sp)) * -1) infinite;
background-image: var(--cross), radial-gradient(var(--dt) 2.5vmin, #fff0 calc(2.5vmin + 1px));
filter: hue-rotate(30deg) var(--shadow);
background-size: 2vmin 1vmin, 1vmin 2vmin, 100% 100%;
}

@keyframes spin-all {
0% { transform: rotate(0deg) scale(0.65); }
100% { transform: rotate(360deg) scale(0.65); }
}

@keyframes spin-top {
0% { transform: rotate(-45deg); }
100% { transform: rotate(315deg); }
}

@keyframes spin-bot {
0%, 35% { transform: rotate(0deg); }
80%, 100% { transform: rotate(-360deg); }
}

@keyframes spin-left {
0%, 35% { transform: rotate(175deg); }
80%, 100% { transform: rotate(535deg); }
}

@keyframes spin-last {
0%, 10% { transform: rotate(-280deg); }
90%, 100% { transform: rotate(-640deg); }
}
</style>
<script>

</script>
<div class="content">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>

[/html]

0

Поделиться20826.10.22 12:51:51

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<style>
:root{
/* color type A */
--line_color : #555555 ;
--back_color : #FFECF6 ;

/* color type B */
/* --line_color : #1b1919 ;
--back_color : #E9ECFF ; */

/* color type C */
/* --line_color : #00135C ;
--back_color : #DEFFFA ; */
}

.button7{
position : relative ;
z-index : 0 ;
width : 240px ;
height : 56px ;
text-decoration : none ;
font-size : 14px ;
font-weight : bold ;
color : var(--line_color) ;
letter-spacing : 2px ;
transition : all .3s ease ;
}
.button7__text{
display : flex ;
justify-content : center ;
align-items : center ;
width : 100% ;
height : 100% ;
}
.button7::before,
.button7::after,
.button7__text::before,
.button7__text::after{
content : '' ;
position : absolute ;
height : 3px ;
border-radius : 2px ;
background : var(--line_color) ;
transition : all .5s ease ;
}
.button7::before{
top : 0 ;
left : 54px ;
width : calc( 100% - 56px * 2 - 16px ) ;
}
.button7::after{
top : 0 ;
right : 54px ;
width : 8px ;
}
.button7__text::before{
bottom : 0 ;
right : 54px ;
width : calc( 100% - 56px * 2 - 16px ) ;
}
.button7__text::after{
bottom : 0 ;
left : 54px ;
width : 8px ;
}
.button7__line{
position : absolute ;
top : 0 ;
width : 56px ;
height : 100% ;
overflow : hidden ;
}
.button7__line::before{
content : '' ;
position : absolute ;
top : 0 ;
width : 150% ;
height : 100% ;
box-sizing : border-box ;
border-radius : 300px ;
border : solid 3px var(--line_color) ;
}
.button7__line:nth-child(1),
.button7__line:nth-child(1)::before{
left : 0 ;
}
.button7__line:nth-child(2),
.button7__line:nth-child(2)::before{
right : 0 ;
}
.button7:hover{
letter-spacing : 6px ;
}
.button7:hover::before,
.button7:hover .button__text::before{
width : 8px ;
}
.button7:hover::after,
.button7:hover .button__text::after{
width : calc( 100% - 56px * 2 - 16px ) ;
}
.button7__drow1,
.button7__drow2{
position : absolute ;
z-index : -1 ;
border-radius : 16px ;
transform-origin : 16px 16px ;
}
.button7__drow1{
top : -16px ;
left : 40px ;
width : 32px ;
height : 0;
transform : rotate( 30deg ) ;
}
.button7__drow2{
top : 44px ;
left : 77px ;
width : 32px ;
height : 0 ;
transform : rotate(-127deg ) ;
}
.button7__drow1::before,
.button7__drow1::after,
.button7__drow2::before,
.button7__drow2::after{
content : '' ;
position : absolute ;
}
.button7__drow1::before{
bottom : 0 ;
left : 0 ;
width : 0 ;
height : 32px ;
border-radius : 16px ;
transform-origin : 16px 16px ;
transform : rotate( -60deg ) ;
}
.button7__drow1::after{
top : -10px ;
left : 45px ;
width : 0 ;
height : 32px ;
border-radius : 16px ;
transform-origin : 16px 16px ;
transform : rotate( 69deg ) ;
}
.button7__drow2::before{
bottom : 0 ;
left : 0 ;
width : 0 ;
height : 32px ;
border-radius : 16px ;
transform-origin : 16px 16px ;
transform : rotate( -146deg ) ;
}
.button7__drow2::after{
bottom : 26px ;
left : -40px ;
width : 0 ;
height : 32px ;
border-radius : 16px ;
transform-origin : 16px 16px ;
transform : rotate( -262deg ) ;
}
.button7__drow1,
.button7__drow1::before,
.button7__drow1::after,
.button7__drow2,
.button7__drow2::before,
.button7__drow2::after{
background : var( --back_color ) ;
}
.button7:hover .button7__drow1{
animation : drow1 ease-in .06s ;
animation-fill-mode : forwards ;
}
.button7:hover .button7__drow1::before{
animation : drow2 linear .08s .06s ;
animation-fill-mode : forwards ;
}
.button7:hover .button7__drow1::after{
animation : drow3 linear .03s .14s ;
animation-fill-mode : forwards ;
}
.button7:hover .button7__drow2{
animation : drow4 linear .06s .2s ;
animation-fill-mode : forwards ;
}
.button7:hover .button7__drow2::before{
animation : drow3 linear .03s .26s ;
animation-fill-mode : forwards ;
}
.button7:hover .button7__drow2::after{
animation : drow5 linear .06s .32s ;
animation-fill-mode : forwards ;
}
@keyframes drow1{
0% { height : 0 ; }
100% { height : 100px ; }
}
@keyframes drow2{
0% { width : 0 ; opacity : 0 ;}
10% { opacity : 0 ;}
11% { opacity : 1 ;}
100% { width : 120px ; }
}
@keyframes drow3{
0% { width : 0 ; }
100% { width : 80px ; }
}
@keyframes drow4{
0% { height : 0 ; }
100% { height : 120px ; }
}
@keyframes drow5{
0% { width : 0 ; }
100% { width : 124px ; }
}

/* 本体には関係ないスタイル */
#container5{
width : 100% ;
height : 300px ;
display : flex ;
flex-direction : column ;
justify-content : center ;
align-items : center ;
}

</style>

HTML CSS

Result
Skip Results Iframe

<a href="#" class="button7">
<div class="button7__line"></div>
<div class="button7__line"></div>
<span class="button7__text">ENTRY</span>
<div class="button7__drow1"></div>
<div class="button7__drow2"></div>
</a>

</div>

[/html]

0

Поделиться20927.10.22 07:56:14

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<style>
section {
padding: 5rem 2rem;
text-align: center;
color: gray;
font-family: system-ui;
min-width: 50%;
max-width: 600px;
margin: 3rem 0;
background: rgba(255,255,255,.025);
position: relative;
}

section:has(img) {
padding: 0;
display: grid;
place-items: center;
}
section:has(img)::after {
content: 'Images need a container div';
position: absolute;
padding: 1rem;
background: rgba(0,0,0,.5);
border-radius: 5px;
color: lightgray;
}

code {
padding: .2rem;
background: #333;
border-radius: 4px;
}

button {
padding: 1rem 1rem;
border: 0;
color: dimgray;
border-radius: 5px;
}

img {
width: 100%;
}

h1 {
font-size: 2rem;
width: fit-content;
margin: 0 auto;
padding: 1rem;
}

/* resets and basic page styling*/
body {
margin: 0;
padding: 0;
background: #222;
min-height: 100vh;
display: grid;
place-items: center;
}

* {
box-sizing: border-box;
}
</style>
<script>
var lights_count = 10,
target_elements = document.querySelectorAll('.addLights'),
colors = ['blue','red','gold','ForestGreen','DarkViolet','orangered', 'DarkTurquoise'],
wire_color = '#040',
twinkle = false,
l_width = 100 / lights_count,
rotation_max = 35

target_elements.forEach(function(elm) {
for(var i=0;i<lights_count;i++) {
var l = document.createElement('div')
l.className = 'light_box'
l.style.width = l_width + '%'
l.style.position = 'absolute'
l.style.left = l_width * i + '%'
l.style.top = '1%'
l.style.bottom = '1%'
l.style.borderTop = '2px solid '+wire_color
l.style.borderBottom = '2px solid '+wire_color
var rot = Math.random() < .5 ? -Math.random()*rotation_max : Math.random()*rotation_max
l.innerHTML = `
<div class='light' style='--color:${colors[i%colors.length]}; transform:rotate(${rot}deg);'></div>
<div class='light' style='--color:${colors[(i+2)%colors.length]}; transform:rotate(${rot}deg);'></div>`
if(twinkle) {
l.classList.add('twinkle')
l.style.setProperty('--delay', i / 3 - 1 + 's' )
}
elm.appendChild(l)
}
})

document.body.innerHTML += `
<style>
.twinkle .light::after {
animation: twinkle 1s linear var(--delay) infinite;
}
@keyframes twinkle {
50% { box-shadow: 0 0 0 transparent; }
}

.light_box {
pointer-events: none;
}
.light {
width: 15%;
max-width: 15px;
aspect-ratio: 1/1;
background: ${wire_color};
position: absolute;
left: 40%;
border-radius: 25%;
--color: gold;
}
.light:nth-child(1) {
top: 100%;
transform-origin: 50% 0%;
}
.light:nth-child(2) {
bottom: 100%;
transform-origin: 50% 100%;
}

.light::after {
content: '';
width: 150%;
aspect-ratio: 1/2;
background:
radial-gradient(rgba(255,255,255,.5), transparent),
var(--color);
box-shadow: 0 0 15px 5px var(--color);
position: absolute;
left: -25%;
}
.light:nth-child(1)::after {
top: 80%;
border-radius: 100% / 60% 60% 125% 125%;
}
.light:nth-child(2)::after {
bottom: 80%;
border-radius: 100% / 125% 125% 60% 60%;
}

.addLights {
position: relative;
}
</style>
`
</script>
<section class='addLights'>
Add lights to any element using the<br>
<code>.addLights</code> class
</section>

<section>
<button class='addLights'>Buttons</button>
</section>

<section>
<h1 class='addLights'>Headings work as well</h1>
</section>

<section class='addLights'>
Thank you for your time.
</section>
[/html]

0

Поделиться21027.10.22 18:52:09

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<style>
body {
font-weight: 900;
font-size: 36px;
font-family: system-ui, -apple-system, sans-serif;
letter-spacing: -1px;
padding: 0 0 2rem 2rem;
}

p {
margin-bottom: 4rem;
}

h1 {
margin-bottom: 3.5rem;
span {
background-size: 100% 15%;
background-repeat: repeat-x;
background-position: left 0% bottom 10%;
}
}

.rainbow {
background-image: linear-gradient(90deg, hsl(284,91%,69%) 0%, hsl(284,91%,69%) 12.5%,hsl(329,91%,69%) 12.5%, hsl(329,91%,69%) 25%,hsl(14,91%,69%) 25%, hsl(14,91%,69%) 37.5%,hsl(59,91%,69%) 37.5%, hsl(59,91%,69%) 50%,hsl(104,91%,69%) 50%, hsl(104,91%,69%) 62.5%,hsl(149,91%,69%) 62.5%, hsl(149,91%,69%) 75%,hsl(194,91%,69%) 75%, hsl(194,91%,69%) 87.5%,hsl(239,91%,69%) 87.5%, hsl(239,91%,69%) 100%);
}

.rainbow-energetic {
background-image: repeating-linear-gradient(135deg, hsl(46,80%,67%) 0px, hsl(46,80%,67%) 14px,hsl(91,80%,67%) 14px, hsl(91,80%,67%) 28px,hsl(136,80%,67%) 28px, hsl(136,80%,67%) 42px,hsl(181,80%,67%) 42px, hsl(181,80%,67%) 56px,hsl(226,80%,67%) 56px, hsl(226,80%,67%) 70px,hsl(271,80%,67%) 70px, hsl(271,80%,67%) 84px,hsl(316,80%,67%) 84px, hsl(316,80%,67%) 98px,hsl(1,80%,67%) 98px, hsl(1,80%,67%) 112px);
}

.tapered {
background-image: linear-gradient(179deg,rgb(254, 97, 158) 0%, rgb(254, 97, 158) 50%,transparent 54%, transparent 100%);
}

.tapered2 {
background-image: linear-gradient(181deg, #ffa620 0%, #fba11a 50%, transparent 54%, transparent 100%);
}

.double {
background-image: repeating-linear-gradient(0deg, rgb(246, 96, 94) 0px, rgb(246, 96, 94) 4px,transparent 4px, transparent 8px,rgb(249, 139, 40) 8px, rgb(249, 139, 40) 12px,transparent 12px, transparent 16px),linear-gradient(90deg, #FFF,#FFF);
}

.triple {
background-image: repeating-linear-gradient(0deg, rgb(42, 166, 224) 0px, rgb(42, 166, 224) 4px,transparent 4px, transparent 8px,rgb(48, 200, 159) 8px, rgb(48, 200, 159) 12px,transparent 12px, transparent 16px,rgb(53, 234, 94) 16px, rgb(53, 234, 94) 20px,transparent 20px, transparent 24px),linear-gradient(90deg, #FFF,#FFF);
background-size: 100% 24%;
background-position: 100% 98%;
}

.graph-paper {
background-image: repeating-linear-gradient(0deg, hsl(144,66%,90%) 0px, hsl(144,66%,90%) 2px,transparent 2px, transparent 7px),repeating-linear-gradient(90deg, hsl(144,66%,90%) 0px, hsl(144,66%,90%) 2px,transparent 2px, transparent 7px),linear-gradient(90deg, hsl(218,79%,50%),hsl(218,79%,50%));
}

.weave {
background-image: repeating-linear-gradient(135deg, rgb(99, 171, 222) 0px, rgb(99, 171, 222) 7px,transparent 7px, transparent 14px),repeating-linear-gradient(45deg, rgb(38, 95, 221) 0px, rgb(38, 95, 221) 7px,transparent 7px, transparent 14px),repeating-linear-gradient(135deg, #FFF 0px, #FFF 7px,#FFF 7px, #FFF 14px);
}

.green {
background-image: repeating-linear-gradient(90deg, rgb(79, 191, 86) 0px, rgb(79, 191, 86) 16px,rgb(59, 180, 83) 16px, rgb(59, 180, 83) 32px,rgb(30, 162, 80) 32px, rgb(30, 162, 80) 48px,rgb(40, 168, 81) 48px, rgb(40, 168, 81) 64px,rgb(88, 197, 87) 64px, rgb(88, 197, 87) 80px,rgb(98, 203, 88) 80px, rgb(98, 203, 88) 96px,rgb(49, 174, 82) 96px, rgb(49, 174, 82) 112px,rgb(69, 185, 85) 112px, rgb(69, 185, 85) 128px)
}

.purple {
background-image: repeating-linear-gradient(135deg, rgb(180, 96, 226) 0px, rgb(180, 96, 226) 45px,rgb(196, 124, 232) 45px, rgb(196, 124, 232) 76px,rgb(165, 69, 221) 76px, rgb(165, 69, 221) 114px,rgb(211, 151, 237) 114px, rgb(211, 151, 237) 127px,rgb(242, 206, 248) 127px, rgb(242, 206, 248) 139px,rgb(227, 179, 243) 139px, rgb(227, 179, 243) 170px);
}

.purple-orange {
background-image: linear-gradient(90deg, rgb(246, 137, 24) 0%, rgb(246, 137, 24) 31%,rgb(174, 62, 159) 31%, rgb(174, 62, 159) 42%,rgb(210, 100, 92) 42%, rgb(210, 100, 92) 49%,rgb(138, 25, 227) 49%, rgb(138, 25, 227) 100%);
}

.yellow-orange {
background-image: linear-gradient(90deg, rgb(218, 230, 1) 0%, rgb(218, 230, 1) 7%,rgb(226, 203, 7) 7%, rgb(226, 203, 7) 14%,rgb(234, 176, 13) 14%, rgb(234, 176, 13) 21%,rgb(242, 148, 18) 21%, rgb(242, 148, 18) 28%,rgb(250, 121, 24) 28%, rgb(250, 121, 24) 100%);
background-size: 100% 18%;
}

footer {
font-size: 24px;
font-weight: 500;
a {
color: #007bff;
text-decoration: none;
}
}

</style>
<script>

</script>
<p>Cool Underlines With CSS Gradients</p>

<h1><span class="rainbow">Standard Rainbow</span></h1>
<h1><span class="rainbow-energetic">Energetic Rainbow</span></h1>

<h1><span class="tapered">This One is Tapered!</span></h1>
<h1><span class="tapered2">This One Grows!</span></h1>

<h1><span class="double">Double Underline</span></h1>
<h1><span class="triple">Rare Triple Underline</span></h1>

<h1><span class="graph-paper">Graph Paper</span></h1>
<h1><span class="weave">Blue Weave</span></h1>

<h1><span class="green">Shades of Green</span></h1>
<h1><span class="purple">Shades of Purple</span></h1>

<h1><span class="purple-orange">Purple and Orange</span></h1>
<h1><span class="yellow-orange">Yellow to Orange</span></h1>

<footer>
Made with <a href="http://www.gradientmagic.com" target="_blank">Gradient Magic</a>, inspired by <a href="https://codepen.io/chriscoyier/pen/qBBMYYb" target="_blank">this pen</a>.
</footer>
[/html]

0

concoction

Меню навигации

Пользовательские ссылки

Объявление

Информация о пользователе

Тестовое сообщение

Сообщений 181 страница 210 из 297

Поделиться18116.09.22 11:22:47

Поделиться18216.09.22 15:37:36

Поделиться18303.10.22 10:54:25

Поделиться18403.10.22 13:37:41

Поделиться18505.10.22 12:36:12

Поделиться18605.10.22 14:25:15

Поделиться18706.10.22 13:17:48

Поделиться18814.10.22 11:46:43

Поделиться18914.10.22 12:12:29

Поделиться19017.10.22 15:30:27

Поделиться19117.10.22 15:41:15

Поделиться19217.10.22 15:46:17

Поделиться19318.10.22 08:44:41

Поделиться19418.10.22 12:10:32

Поделиться19518.10.22 12:39:27

Поделиться19619.10.22 08:39:30

Поделиться19719.10.22 09:20:18

Поделиться19819.10.22 09:53:42

Поделиться19919.10.22 12:58:17

Поделиться20019.10.22 15:01:05

Поделиться20119.10.22 15:26:00

Поделиться20219.10.22 15:45:20

Поделиться20320.10.22 11:02:32

Поделиться20424.10.22 09:58:40

Поделиться20524.10.22 10:21:54

Поделиться20624.10.22 11:02:54

Поделиться20725.10.22 10:53:26

Поделиться20826.10.22 12:51:51

Поделиться20927.10.22 07:56:14

Поделиться21027.10.22 18:52:09