حصرياتالمزيد

الخميس، 18 يناير 2018

احصل على هذة الاداة من هنا

تاثير على النص بتقنية CSS3 | حصريا



السلام عليكم ورحمة
الله وبركاته
--
بعد طول غيابنا بسبب الدراسة نعود لكم بتدوينة حصرية نقدم لكم فيها تاثير احترافي على النصوص بتقنية css3 




طريقة التركيب:

    1. توجه الى القالب ثم تحرير html
    2. ضع كود النص في المكان الذي يناسبك
<svg viewBox="0 0 800 600">
  <symbol id="s-text">
    <text text-anchor="middle"
          x="50%"
          y="35%"
          class="text--line"
          >
      عصام ويب
    </text>
    <text text-anchor="middle"
          x="50%"
          y="68%"
          class="text--line2"
          >
      الابداع
    </text>
    
  </symbol>
  
  <g class="g-ants">
    <use xlink:href="#s-text"
      class="text-copy"></use>     
    <use xlink:href="#s-text"
      class="text-copy"></use>     
    <use xlink:href="#s-text"
      class="text-copy"></use>     
    <use xlink:href="#s-text"
      class="text-copy"></use>     
    <use xlink:href="#s-text"
      class="text-copy"></use>     
  </g>
  
  
</svg>

      1. غير النص باللون الأحمر الى ما يناسبك

      1. ابحث عن ]]></b:skin> وضع فوقه الكود التالي
    $colors: #360745, #D61C59, #E7D84B, #EFEAC5, #1B8798;
    
    .text--line {
      font-size: .5em;
      }
    
    svg {
      position: absolute;
      width: 100%;
      height: 100%;
      }
    
    $max: 5;
    $stroke-step: 7%; 
    .text-copy {
      fill: none;
      stroke: white;
      stroke-dasharray: $stroke-step $stroke-step * ($max - 1);
      stroke-width: 3px;
      
      animation: stroke-offset 9s infinite linear;
      
      @for $item from 1 through $max {
        $stroke-color: nth($colors, $item);
        
        &:nth-child(#{$item}) {
          stroke: $stroke-color;
          stroke-dashoffset: $stroke-step * $item;
          }
        }
      }
    
    @keyframes stroke-offset {
      50% {
        stroke-dashoffset: $stroke-step * $max;  
        stroke-dasharray: 0 $stroke-step * $max*2.5;
      }
    }
    
    


      1. اذا واجهت اي مشكلة ضعها بتعليق


    EmoticonEmoticon