مدونة المهووسين

إليك أفضل 5 تأثيرات بCSS3 و Html

Unknown 05:18 Blogger, Episodes, Programming

مرحبا بكم ...
السلام عليكم , لاشك أن العديد من البرمجين أو الذين هم في طرو تعلم البرمجة يودون تطوير خبرتهم البرمجية حيث أن يريدون بعض تصاميم أو تأثيرات سواء Css أو Css3 أو Html , لذلك أحببت اليوم أن أ\اارك معكم بعض الأكواد الثاتيرات بCSS3 و Html , حيث أن هذه الثأتيرات بحول ستفيجكم في البرمجة و تطوير المواقع , إذن نمر إلى شرح هذه الثأتيرات .

1- عبارة عن راية سباق تتحرك بإحترافية كبيرة .

للمعاينتها مباشرة إضغط هنا .
كود Html :

كود Css :

<div class='rap'>
body{
  background: #222;
  overflow: hidden;
}
.rap{
  position: relative;
  top: 300px;
  left: 350px;
  transform: rotate(25deg) skew(-30deg);
}
.flag{
  list-style: none;
  width: 10px;
  height: 105px;
  background: linear-gradient(to bottom, #ffffff 50%,#000000 50%);
  background-size: 15px 15px;
  border-radius: 0px;
  box-shadow: 
    120px 120px 7px #000,
    0 0 5px #000,
    0 0 1px #fff,
    0 0 2px #fff,
    0 0 2px #fff;
  position: absolute;
  transform-origin: 0% 150px;
  animation: flag 1s ease-in-out infinite;
}
@keyframes flag{
  50%{transform: translateY(5px) translateX(5px) rotateX(10deg) rotate(2deg);
  }
}
@for $i from 1 through 15{
  .flag:nth-child(#{$i}){
    animation-delay: $i * .1s;
    margin-left: $i * 10px;
  } 
}
.flag:nth-of-type(even){
  background: linear-gradient(to bottom, #000 50%,#fff 50%);
  background-size: 15px 15px;
}
.flag:nth-of-type(1):before{
  content:'';
  width: 1px;
  height: 300px;
  border: 2px solid transparent;
  border-right: 2px solid #fff;
  border-radius: 0%;
  box-shadow: 
    125px 125px 7px #000,
    0 0 5px #000;
  position: absolute;
  top: -5px;
  left: -8px;
}

2- عبارة عن شريط تحميل مصمم بإحترافية تامة :

لمعاينتها مباشرة من هنا .

كود Html :

</html>

كود Css :

html {
  
  height: 100%;
  
  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(radial, center center, 0, center center, 460, from(#2F2727), to(black));

/* Safari 5.1+, Chrome 10+ */
  background: -webkit-radial-gradient(circle, #2F2727, black);

/* Firefox 3.6+ */
  background: -moz-radial-gradient(circle, #2F2727, black);

/* IE 10 */
  background: -ms-radial-gradient(circle, #2F2727, black);
}
  
.container {
 margin: 80px auto;
 padding: 25px 10px 20px 50px;
 width: 100%;
 height: 40px;
 text-align: center;
 border: 4px ridge rgba(180,227,145,1);
 border-radius: 50px;
 box-shadow: 0px 0px 3px 2px black;
 
}

.sphere {
 height: 2em;
 width: 2em;
 border-radius: 50%;
 float: left;
 margin-right: 31px;
 z-index: 20 !Important;
 position: relative;
 -webkit-transform: scale(.3);
 z-index: -1;
 background: -webkit-radial-gradient(10% 10%, ellipse cover, rgba(180,227,145,1) 0%,rgba(97,196,25,1) 50%,rgba(180,227,145,1) 100%); /* Chrome10+, Safari5.1+ */
 background: -moz-radial-gradient(10% 10%, ellipse cover, rgba(180,227,145,1) 0%, rgba(97,196,25,1) 50%, rgba(180,227,145,1) 100%); /* FF3.6+ */
 background: -o-radial-gradient(10% 10%, ellipse cover, rgba(180,227,145,1) 0%,rgba(97,196,25,1) 50%,rgba(180,227,145,1) 100%); /* Opera 12+ */
 background: -ms-radial-gradient(10% 10%, ellipse cover, rgba(180,227,145,1) 0%,rgba(97,196,25,1) 50%,rgba(180,227,145,1) 100%); /* IE10+ */
 background: radial-gradient(ellipse at center, rgba(180,227,145,1) 0%,rgba(97,196,25,1) 50%,rgba(180,227,145,1) 100%); /* W3C */
}

.shadow {
 position: relative;
 top: -6.9em;
 width: 2em;
 left: 54px;
 height: 0.5em;
 box-shadow: 0px 0px 25px -.5px rgba(255, 255, 255, 1);
 border-radius: 50%;
 float: left;
 margin-right: 31px;
 -webkit-transform: scale(.3);
 opacity: 0;
}

.sphere:before { /*sourced from hop.ie/blog/balls*/
  content: "";
  position: absolute;
  top: 1%;
  left: 5%;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background: -webkit-radial-gradient(50% 20%, circle, #ffffff, rgba(255, 255, 255, 0) 58%);
  z-index: 2;
}

#wrap {
 margin: 0 auto;
 width: 640px;
}

.clear {
 clear: both;
}

#shadow1 {
 -webkit-animation: fade-1 2s 0s infinite;
}

#shadow2 {
 -webkit-animation: fade-2 2s .2s infinite;
}

#shadow3 {
 -webkit-animation: fade-3 2s .4s infinite;
}

#shadow4 {
 -webkit-animation: fade-4 2s .6s infinite;
}

#shadow5 {
 -webkit-animation: fade-5 2s .8s infinite;
}

#shadow6 {
 -webkit-animation: fade-6 2s 1s infinite;
}

#shadow7 {
 -webkit-animation: fade-7 2s 1.2s infinite;
}

#shadow8 {
 -webkit-animation: fade-8 2s 1.4s infinite;
}

#shadow9 {
 -webkit-animation: fade-9 2s 1.6s infinite;
}

#shadow10 {
 -webkit-animation: fade-10 2s 1.8s infinite;
}

#sphere1{
 -webkit-animation: scale-1 2s 0s infinite;
}

#sphere2 {
 -webkit-animation: scale-2 2s .2s infinite;
}

#sphere3 {
 -webkit-animation: scale-3 2s .4s infinite;
}

#sphere4 {
 -webkit-animation: scale-4 2s .6s infinite;
}

#sphere5 {
 -webkit-animation: scale-5 2s .8s infinite;
}

#sphere6 {
 -webkit-animation: scale-6 2s 1s infinite;
}

#sphere7 {
 -webkit-animation: scale-7 2s 1.2s infinite;
}

#sphere8 {
 -webkit-animation: scale-8 2s 1.4s infinite;
}

#sphere9 {
 -webkit-animation: scale-9 2s 1.6s infinite;
}

#sphere10 {
 -webkit-animation: scale-10 2s 1.8s infinite;
}

@-webkit-keyframes fade-1 {
 0%    { -webkit-transform: scale(.3);
    opacity: 0;
    }
 35%, 65% { -webkit-transform: scale(1);
    opacity: .3;
    }
 65%, 100%{ -webkit-transform: scale(.3);
    opacity: 0;
    }
}

@-webkit-keyframes fade-2 {
 0%    { -webkit-transform: scale(.3);
    opacity: 0;
    }
 35%, 65% { -webkit-transform: scale(1);
    opacity: .3;
    }
 65%, 100%{ -webkit-transform: scale(.3);
    opacity: 0;
    }
}

@-webkit-keyframes fade-3 {
 0%    { -webkit-transform: scale(.3);
    opacity: 0;
    }
 35%, 65% { -webkit-transform: scale(1);
    opacity: .3;
    }
 65%, 100%{ -webkit-transform: scale(.3);
    opacity: 0;
    }
}

@-webkit-keyframes fade-4 {
 0%    { -webkit-transform: scale(.3);
    opacity: 0;
    }
 35%, 65% { -webkit-transform: scale(1);
    opacity: .3;
    }
 65%, 100%{ -webkit-transform: scale(.3);
    opacity: 0;
    }
}

@-webkit-keyframes fade-5 {
 0%    { -webkit-transform: scale(.3);
    opacity: 0;
    }
 35%, 65% { -webkit-transform: scale(1);
    opacity: .3;
    }
 65%, 100%{ -webkit-transform: scale(.3);
    opacity: 0;
    }
}

@-webkit-keyframes fade-6 {
 0%    { -webkit-transform: scale(.3);
    opacity: 0;
    }
 35%, 65% { -webkit-transform: scale(1);
    opacity: .3;
    }
 65%, 100%{ -webkit-transform: scale(.3);
    opacity: 0;
    }
}

@-webkit-keyframes fade-7 {
 0%    { -webkit-transform: scale(.3);
    opacity: 0;
    }
 35%, 65% { -webkit-transform: scale(1);
    opacity: .3;
    }
 65%, 100%{ -webkit-transform: scale(.3);
    opacity: 0;
    }
}

@-webkit-keyframes fade-8 {
 0%    { -webkit-transform: scale(.3);
    opacity: 0;
    }
 35%, 65% { -webkit-transform: scale(1);
    opacity: .3;
    }
 65%, 100%{ -webkit-transform: scale(.3);
    opacity: 0;
    }
}

@-webkit-keyframes fade-9 {
 0%    { -webkit-transform: scale(.3);
    opacity: 0;
    }
 35%, 65% { -webkit-transform: scale(1);
    opacity: .3;
    }
 65%, 100%{ -webkit-transform: scale(.3);
    opacity: 0;
    }
}

@-webkit-keyframes fade-10 {
 0%    { -webkit-transform: scale(.3);
    opacity: 0;
    }
 35%, 65% { -webkit-transform: scale(1);
    opacity: .3;
    }
 65%, 100%{ -webkit-transform: scale(.3);
    opacity: 0;
    }
}

@-webkit-keyframes scale-1 {
 0%    { -webkit-transform: scale(.3);
    }
 35%, 65% { -webkit-transform: scale(1);
    }
 65%, 100%{ -webkit-transform: scale(.3);
    }
}

@-webkit-keyframes scale-2 {
 0%    { -webkit-transform: scale(.3);}
 35%, 65% { -webkit-transform: scale(1);}
 65%, 100%{ -webkit-transform: scale(.3);}
 }

@-webkit-keyframes scale-3 {
 0%    { -webkit-transform: scale(.3);}
 35%, 65% { -webkit-transform: scale(1);}
 65%, 100%{ -webkit-transform: scale(.3);}
 }

@-webkit-keyframes scale-4 {
 0%    { -webkit-transform: scale(.3);}
 35%, 65% { -webkit-transform: scale(1);}
 65%, 100%{ -webkit-transform: scale(.3);}}

@-webkit-keyframes scale-5 {
 0%    { -webkit-transform: scale(.3);}
 35%, 65% { -webkit-transform: scale(1);}
 65%, 100%{ -webkit-transform: scale(.3);}}

@-webkit-keyframes scale-6{
 0%     { -webkit-transform: scale(.3);}
 35%, 65% { -webkit-transform: scale(1);}
 65%, 100%{ -webkit-transform: scale(.3);}}

@-webkit-keyframes scale-7 {
 0%    { -webkit-transform: scale(.3);}
 35%, 65% { -webkit-transform: scale(1);}
 65%, 100%{ -webkit-transform: scale(.3);}}

@-webkit-keyframes scale-8 {
 0%    { -webkit-transform: scale(.3);}
 35%, 65% { -webkit-transform: scale(1);}
 65%, 100%{ -webkit-transform: scale(.3);}}

@-webkit-keyframes scale-9 {
 0%    { -webkit-transform: scale(.3);}
 35%, 65% { -webkit-transform: scale(1);}
 65%, 100%{ -webkit-transform: scale(.3);}}

@-webkit-keyframes scale-10 {
 0%    { -webkit-transform: scale(.3);}
 35%, 65% { -webkit-transform: scale(1);}
 65%, 100%{ -webkit-transform: scale(.3);}}

3-عبارة عن وجه تحميل هو متشابه للشكل السابق لكن مصمم بإحترافية كبيرة .

لمعيانتها إضغط هناا .

كود Html :

كود Css :

$width: 300px;

bcdcf;
$colordark: #e

$colorlight: #
fa416a;
$colorface: #ffffff;

trip-units($numb

$duration: 0.6s;

@function 
ser) {
  @return $number / ($number * 0 + 1);

}

@keyframes changecolor {
  from { border-b
otom-color: $colorlight; }

$colordark; }
}

body, html {
  height:

to { border-bottom-color
:100%;
  width: 100%;
}
body{
  margin: 0;
}

.happyloader {

s($triside),2) - pow(

$triside: $width/2;
  $triheight: round(sqrt(pow(strip-uni
tstrip-units($triside)/2,2)));
  position: relative;
  width: $width;

-$triheight}px;
  margin-lef

height: #{2*$triheight}px;
  top: 50%;
  left: 50%;
  margin-top: #
{t: -$triside;
  
  *, *:before, *:after {
    position: absolute;
  }
  *:before, *:after {

(($triside/7)*3)

content: "";
    display: block;
  }
  
  .face {
    width: ($triside/7)*3;
    height:
 /2;
    top: $triheight+$triside/7;
    left: $triside - (($triside/7)*3)/2;

after {
      background-color: $colorface;  
    }

border-radius: 0 0 ($triside/7)*3 ($triside/7)*3;
    
    &, &:before, &
:   &:before, &:after {
      border-radius: 50%;
      width: $triside/7;
      height: $triside/7;
      top: -1.5*($triside/7);

.tria

}
    &:before {
      left: -$triside/2+$triside/7; 
    }
    &:after {
      right: -$triside/2+$triside/7; 
    }
  }
  
 
 ngle {
    &, &:before, &:after {
      border-left: $triside/2 solid transparent;
      border-right: $triside/2 solid transparent;

animation: changecolor $duration infinite linear;

border-bottom: #{$triheight}px solid $colorlight;
    }
    
    &:nth-child(1) {
      bottom: 0;
      left: $triside/2;
    
   &:before, &:after {
        top: #{-$triheight}px;
      }
      &:before {
        left: 0;
        animation: changecolor $duration infinite $duration*(-4/6) linear;
      }

2;
      transf

&:after {
        right: 0;
        animation: changecolor $duration infinite $duration*(-2/6) linear;
      }
    }
    &:nth-child(2) {
      top: 0;
      left: $triside
/orm: rotate(180deg);
      animation: changecolor $duration infinite $duration*(-3/6) linear;
      &:before, &:after {
        top: #{-$triheight}px;
      }
      &:before {
        left: 0;

}
    }
  }
}

animation: changecolor $duration infinite $duration*(-1/6) linear;
      }
      &:after {
        right: 0;
        animation: changecolor $duration infinite $duration*(-5/6) linear;

4-عبارة عن أيقونة تويتر تعرض إسمك طبعا هي إحترافية و مرعبة ^^ .

لمعيانتها أخي إضغط هنا .

كود Html :

كود Css :

$background-color: #55acee;
$twitter-color: white;

.button-face {
  background-color: $background-color;
  border: none;
  border-radius: 5%;
  width: 140px;
  height: 40px;
  z-index: 1;
  box-shadow: rgba(0,0,0,0.2) 0px 2px 3px, inset rgba(0,0,0,0.2) 0px -1px 2px;
  text-align: center;
  animation: close 1s forwards, stay 1s forwards;
}

span {
  display: block;
}

.fa-twitter {
  color: $twitter-color;
  font-size: 30px;
  margin-top: 5px;
  text-shadow: 1px 1px 1px #adadad;
}

.screw {
  width: 7px;
  height: 7px;
  background-color: gray;
  border-radius: 50%;
  border: 1px solid #3f3f3f;
  margin-left: 125px;
  top: 25px;
  position: absolute;
  box-shadow: rgba(0,0,0,0.2) 0px 2px 3px, inset rgba(0,0,0,0.2) 0px -1px 2px;
  z-index: 5;
}

.line {
  height: 7px;
  width: 1px;
  background-color: #3f3f3f;
  margin-left: 3px;
}

a { 
  color: black;
  height: 40px;
  width: 140px;
  text-decoration: none;
  position: absolute;
  left: 50%;
  margin-left: -70px;
  top: 100px;
}

.handle {
  z-index: -1;
  margin-top: -61px;
  border-radius: 5%;
  width: 140px;
  height: 40px;
  font-size: 16px;
  position: relative;
  background-color: #f2f2f2;
  color: #3f3f3f;
  box-shadow: rgba(0,0,0,0.2) 0 2px 3px, inset rgba(0,0,0,0.2) 0 -1px 2px;
  font-family: 'Archivo Narrow', sans-serif;
}

h4 {
  margin-left: 4px;
  font-family: 'Archivo Narrow', sans-serif;
  line-height: 40px;
}

a:hover .button-face {
  animation: open 1s forwards, stay 1s forwards; 
}

// Animation
@keyframes open {
  0% {
    transform-origin: 128px 30px;
  }
  25% {
    transform-origin: 128px 30px;
    transform: rotate(-120deg);
  }
  50% {
    transform-origin: 128px 30px;
    transform: rotate(-70deg);
  }
  100% {
    transform-origin: 128px 30px;
    transform: rotate(-90deg);
  } 
}

@keyframes close {
  0% {
    transform-origin: 128px 30px;
    transform: rotate(-90deg);
  }
  100% {
    transform-origin: 128px 30px;
    transform: rotate(0deg);
  } 
}

@keyframes stay {
  0% {
    transform-origin: 128px 30px;
    transform: rotate(0deg);
  }
  100% {
    transform-origin: 128px 30px;
    transform: rotate(0deg);
  } 
}

5- أخيرا و ليس أخيرا :v عبارة عن صحن متحرك رائعة و بتقنية ثلاتية الأبعاد 3D .

إضغط هناا لمشاهدته مباشرة .

كود Html :

كود Css :

html, body{ width: 100%; height: 100%; min-width: 500px; min-height: 500px; margin: 0; padding: 0; overflow: hidden; } 35em; body { perspective : background-image: radial-gradient(at 50% 50%, rgb(140, 143, 149) 0%, rgb(0, 0, 0) 100%); background-position: 50% 50%; background-repeat: no-repeat no-repeat; } .plate{ -style: preserve-3d; position: absolute; top: calc(50% - 50px); left: calc(50% - 40px); transfor m transform-origin: 40px center; transform: rotateX(-20deg) rotateY(0deg) rotateZ(30deg); px; height: 80px; overflow: hidden; &:a animation: spin-dat-plate 5s infinite linear; } .side{ position: absolute; width: 7 4fter{ position: absolute; content: ''; width: 100%; height: 100%; transform: translateX(0) skewX(-30deg); $i + 1}) { transform: rotateY(#{$i*360/20}deg) translateZ(8em) skewX(30de background: linear-gradient(to bottom, #e1e2dd 0%,#cecece 6%,#e2e2de 100%); } @for $i from 0 to 20 { &:nth-child(# {g) rotateX(-60deg); } } } .bottom{ background: #d5d6d3; width: 195px; height: 195px; border-radius: 50%; transform: rotateX(90deg) translateY(0px) translateX(-61px) translateZ(37px); } @keyframes spin-dat-plate{ from{ transform: rotateX(-20deg) rotateY(0deg) rotateZ(30deg); } to{ transform: rotateX(-20deg) rotateY(360deg) rotateZ(30deg); } }

إلى هناا ينتهي درسنا أتمنى من صميم القلب أن تكونو قد إستفدتم ♥
في أماان الله ....

مدونة المهووسين

إليك أفضل 5 تأثيرات بCSS3 و Html

مدير المدونة

أحدث المشاركات

تدوينة الأسبوع

المشاركات الشائعة

Formulaire de contact

Libellés

Archives du blog