24 Янв
Полезные статьи

Курс по созданию сайта. Эффект – текст в движение

Сегодня я научу вас созданию очень яркого эффекта. Этот эффект особенно хорошо выглядит на темном фоне. Для этого вам понадобиться десять минут вашего времени и код приведенный ниже. 

Записавшись на мой курс по созданию сайтов, Вы сможете разрабатывать действительно удивительные сайты. 

Проиграть видео
CSS КЛАСС 
				
					sliding-text
HTML Для эффекта движения 
				
					<style>
body{
    --speed: 25s;
}
.sliding-text .elementor-widget-wrap{
    display: block !important;
}
.sliding-text .elementor-widget{
    overflow: hidden;
    width: 1000vw !important;
    max-width: 1000vw !important;
}
.sliding-text .sliding .elementor-widget-container{
    -webkit-animation: sliding var(--speed) linear infinite;
    -moz-animation: sliding var(--speed) linear infinite;
    -o-animation: sliding var(--speed) linear infinite;
    animation: sliding var(--speed) linear infinite;
}
.sliding-text .elementor-widget-container{
    float: left;
}
.sliding-text.reverse .elementor-widget-wrap{
    transform: rotate(180deg);
}
.sliding-text.reverse .sliding .elementor-heading-title{
    transform: scale(-1, -1);
}
@keyframe sliding{
0%{ transform: translateX(0); }
100%{ transform: translateX(-100%); }
}
@-webkit-keyframes sliding {
0%{ transform: translateX(0); }
100%{ transform: translateX(-100%); }
}
@-moz-keyframes sliding {
0%{ transform: translateX(0); }
100%{ transform: translateX(-100%); }
}
@-o-keyframes sliding {
0%{ transform: translateX(0); }
100%{ transform: translateX(-100%); }
}
@keyframes sliding {
0%{ transform: translateX(0); }
100%{ transform: translateX(-100%); }
}
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery

$(document).ready(function(){

    var h = []

    $('.sliding-text').each(function(){
        h.push($(this).find('.elementor-widget').clone().html())
    })
    
    function init(){
        $('.sliding-text').each(function(i){

            var $this = $(this)

            $this.find('.elementor-widget').removeClass('sliding')

            var amount = Math.ceil($(window).width()/$(this).find('.elementor-widget-container').outerWidth(true)) + 1

            $this.find('.elementor-widget').empty().addClass('sliding')
            $this.find('.elementor-widget').html(h[i].repeat(amount))
        })  
    }
    
    init()
    $(window).on('load resize', init)
})
</script>
CSS КЛАСС ДЛЯ ОБРАТНОГО ДВИЖЕНИЯ 
				
					sliding-text reverse

Также вы можете заказать у меня интернет магазин. По всем вопросам пишите в whatsapp

Заказать звонок
18 Янв
Полезные статьи

Курс по созданию сайта. Информативные неоновые блоки

Сегодня я научу вас созданию очень яркого эффекта. Этот эффект особенно хорошо выглядит на темном фоне. Для этого вам понадобиться десять минут вашего времени и код приведенный ниже. 

Записавшись на мой курс по созданию сайтов, Вы сможете разрабатывать действительно удивительные сайты. 

Проиграть видео
CSS Для эффекта 
				
					:root{
    --grad1: #9400d3;
    --grad2: #0e1538;
    --grad3: #00ccff;
}
selector{
    position: relative;
    z-index: 999;
}
/*SKEWED EFFECT*/
selector::before, selector::after{
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    -webkit-transform: skewX(2deg) skewY(4deg);
            transform: skewX(2deg) skewY(4deg);
    background: -webkit-linear-gradient(135deg, var(--grad1), var(--grad2), var(--grad3));
    background: linear-gradient(315deg, var(--grad1), var(--grad2), var(--grad3));
    z-index: -9;
}
CSS Для эффекта при наведение 
				
					/*BLUR EFFECT*/
selector::after{
    -webkit-filter: blur(50px);
            filter: blur(50px);
} /*HOVER EFFECT*/
selector:hover::before, selector:hover::after{
     background: -webkit-linear-gradient(315deg, var(--grad1), var(--grad2), var(--grad3));
     background: linear-gradient(135deg, var(--grad1), var(--grad2), var(--grad3));
}

Также вы можете заказать у меня интернет магазин. По всем вопросам пишите в whatsapp

Заказать звонок
16 Янв
Полезные статьи

Курс по созданию сайта. Эффект скроллинга

Сегодня я научу вас созданию очень яркого эффекта. Этот эффект особенно хорошо выглядит на темном фоне. Для этого вам понадобиться десять минут вашего времени и код приведенный ниже. 

Записавшись на мой курс по созданию сайтов, Вы сможете разрабатывать действительно удивительные сайты. 

Проиграть видео
CSS Для эффекта 
				
					::-webkit-scrollbar{
    width: 0.9vw;
    background: #777;
}
::-webkit-scrollbar-thumb{
    background: -webkit-linear-gradient(transparent,#30ff00);
    background: linear-gradient(transparent,#30ff00);
    border-radius: 20px;
}

Также вы можете заказать у меня интернет магазин. По всем вопросам пишите в whatsapp

Заказать звонок
16 Янв
Полезные статьи

Курс по созданию сайта. Неоновая кнопка

Сегодня я научу вас созданию очень яркого эффекта. Этот эффект особенно хорошо выглядит на темном фоне. Для этого вам понадобиться десять минут вашего времени и код приведенный ниже. 

Записавшись на мой курс по созданию сайтов, Вы сможете разрабатывать действительно удивительные сайты. 

Проиграть видео
CSS Для эффекта подсвечивания кнопки 
				
					selector{
    --color: #03bcf4;
}
/* NEON LIGHT GLOW */
selector a{
    text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em var(--color);
    box-shadow: inset 0 0 0.5em 0 var(--color), 0 0 0.5em 0 var(--color);
    transition: box-shadow 2s !important;
    position: relative;
}
CSS Для эффекта при наведении 
				
					/* GLOWING HOVER EFFECT */
selector a::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: 0 0 2em 0.5em var(--color);
    opacity: 0;
    transition: opacity 100ms linear;
     border-radius: 25px; 	
}
selector a:hover::after{
    opacity: 1;
}
CSS Для эффекта отзеркаливания кнопки 
				
					/* BUTTON REFLECTION */
selector a::before {
  pointer-events: none;
  content: "";
  position: absolute;
  background: var(--color);
  top: 120%;
  left: 0;
  width: 100%;
  height: 100%;
  transform: perspective(1em) rotateX(25deg) scale(1, 0.35);
  filter: blur(2em);
  opacity: 0.5;
}
selector a:hover::before {
  opacity: 0.7;
}

Также вы можете заказать у меня интернет магазин. По всем вопросам пишите в whatsapp

Заказать звонок
05 Янв
Полезные статьи

Курс по созданию сайта. Неоновый текст с подсветкой

Сегодня я научу вас созданию очень яркого эффекта. Этот эффект особенно хорошо выглядит на темном фоне. Для этого вам понадобиться десять минут вашего времени и код приведенный ниже. 

Записавшись на мой курс по созданию сайтов, Вы сможете разрабатывать действительно удивительные сайты. 

Проиграть видео
CSS Для эффекта неонового текста 
				
					/*Glowing text only*/
:root{
    --glow: #03bcf4;
}

selector h2 {
	text-shadow: 0 0 10px var(--glow),
		 0 0 20px var(--glow),
		  0 0 40px var(--glow),
		   0 0 80px var(--glow),
		   0 0 160px var(--glow);
}
CSS Для эффекта неонового текста с подсветкой 
				
					/*Glowing and lightening text*/
:root{
    --dark: #0D1C45;
    --white: #ffffff;
    --glow: #03bcf4;
}

selector h2 {
	animation:animate 5s linear infinite;
}
@keyframes animate {
	0%,18%,20%,50.1%,60%,65.1%,80%,90.1%,92%{
		color: var(--dark);
		text-shadow: none;
	}
	18.1%,20.1%,30%,50%,60.1%,65%,80.1%,90%,92.1%,100%{
		color: var(--white);
		text-shadow: 0 0 10px var(--glow),
		 0 0 20px var(--glow),
		  0 0 40px var(--glow),
		   0 0 80px var(--glow),
		   0 0 160px var(--glow);
	}
}

Также вы можете заказать у меня интернет магазин. По всем вопросам пишите в whatsapp

Заказать звонок