الأربعاء، 31 يوليو 2019

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

اضافة خطاطة css بالتدوينة



السلام عليكم
ورحمة الله
وبركاته

في هذه التدوينة سنقدم اضافة ربما ليست جديدة ولكن القليل يعرفها
خطاطة بتقنية css داخل التدوينات
هذه الاضافة قد يحتاجها أصحاب المواقع التعليمية
أو أي مدون يعتمد التحليل في مقالااته
اذ تسهل على القارء استيعابه





طريقة التركيب
  1. قم بتحرير القالب ثم ابحث عن الوسم </head>
  2. ثم قم بلصق الأكواد التالية فوقه
  • <style type='text/css'>
  • .tooltip,
  • .isw-container__sources:before,
  • .isw-container__build:before,
  • .isw-container__deploy:before {
  •   position: absolute;
  •   right: 0;
  •   bottom: 100%;
  •   color: #fff;
  •   background: #ffb238;
  •   text-transform: uppercase;
  •   font-size: 0.9rem;
  •   padding: 0.25rem 0.75rem;
  •   border-radius: 2.5px;
  • }
  • .card,
  • .isw-container__sources div,
  • .isw-container__build div {
  •   line-height: 2;
  •   background: #fff;
  •   padding: 1.2rem 1rem;
  •   border-radius: 4px;
  •   box-shadow: 0 2px 10px #e6e6e6;
  • }
  • .isw-container {
  •   margin: 5vh 2.5vw;
  •   padding: 15vh 0;
  •   background: #fff;
  •   border-radius: 5px;
  •   display: flex;
  •   flex-direction: column;
  •   align-items: center;
  •   text-align: center;
  • }
  • .isw-container svg {
  •   height: 5rem;
  • }
  • .isw-container svg line {
  •   stroke: #5f39dd;
  •   stroke-width: 3px;
  •   stroke-linecap: round;
  •   stroke-dasharray: 2px 20px;
  •   animation: animateline 5s linear both infinite;
  • }
  • .isw-container__sources {
  •   display: flex;
  •   border-radius: 8px;
  •   padding: 1.5rem;
  •   background: #f9f9f9;
  •   position: relative;
  • }
  • .isw-container__sources:before {
  •   content: 'الأساس';
  • }
  • .isw-container__sources div {
  •   text-align: center;
  •   margin: 0 1rem;
  • }
  • .isw-container__build {
  •   padding: 10vh 10vw;
  •   border-radius: 8px;
  •   background: #f9f9f9;
  •   position: relative;
  • }
  • .isw-container__build:before {
  •   content: 'البناء';
  • }
  • .isw-container__build div {
  •   margin: 2rem 0;
  • }
  • .isw-container__build div svg {
  •   width: 4rem;
  •   height: auto;
  •   fill: #5f39dd;
  • }
  • .isw-container__deploy {
  •   background: #f9f9f9;
  •   padding: 1.5rem;
  •   border-radius: 8px;
  •   position: relative;
  • }
  • .isw-container__deploy:before {
  •   content: 'النتيجة';
  • }
  • @media (max-width: 700px) {
  •   .isw-container__sources {
  •     flex-direction: column;
  •   }
  •   .isw-container__sources div {
  •     margin: 1rem 0;
  •   }
  • }
  • @-moz-keyframes animateline {
  •   from {
  •     stroke-dashoffset: 0;
  •   }
  •   to {
  •     stroke-dashoffset: -5rem;
  •   }
  • }
  • @-webkit-keyframes animateline {
  •   from {
  •     stroke-dashoffset: 0;
  •   }
  •   to {
  •     stroke-dashoffset: -5rem;
  •   }
  • }
  • @-o-keyframes animateline {
  •   from {
  •     stroke-dashoffset: 0;
  •   }
  •   to {
  •     stroke-dashoffset: -5rem;
  •   }
  • }
  • @keyframes animateline {
  •   from {
  •     stroke-dashoffset: 0;
  •   }
  •   to {
  •     stroke-dashoffset: -5rem;
  •   }
  • }
  • </style>


  1. الان نقوم بانشاء المشاركة
  2. ثم ننتقل الى تبويب html
  3. ونقوم بلصق الأكواد التالية أسفل الأكواد الموجودة بالتبويب
  • <section class="isw-container">
  •   <div class="isw-container__sources">

  •     <div class="sources--cms">
  •       <h3>المثال 1</h3>
  •       <p>برمجة, تصميم, تطوير</p>
  •     </div>

  •     <div class="sources--markdown">
  •       <h3>المثال 2</h3>
  •       <p>دراما, أكشن, كوميديا.</p>
  •     </div>

  •     <div class="sources--data">
  •       <h3>المثال 3</h3>
  •       <p>بلوجر, ووردبريس, فيسبوك, تويتر, يوتيوب, جوجل.</p>
  •     </div>

  •   </div>

  •   <!-- include a simple line to divide the isw-container, and animate it to show a connection between the different isw-containers  -->
  •   <svg viewbox="0 0 10 100">
  •     <line x1="5" x2="5" y1="0" y2="100"/>
  •   </svg>


  •   <!-- in the build isw-container show two cards, atop of one another and the first of one showing an SVG icon -->
  •   <div class="isw-container__build">

  •     <div class="build--powered">
  •       <svg viewbox="0 0 100 100">
  •         <circle cx="50" cy="50" r="50"/>
  •       </svg>
  •       <p>المثال 4</p>
  •       <h3>جرافيك</h3>
  •     </div>

  •     <div class="build--stack">
  •         HTML · CSS · js
  •     </div>

  •   </div>

  •   <!-- repeat the svg line to connect the second and third isw-containers as well -->
  •   <svg viewbox="0 0 10 100">
  •     <line x1="5" x2="5" y1="0" y2="100"/>
  •   </svg>

  •   <!-- in the deploy isw-container show simply text, without a wrapping card -->
  •   <div class="isw-container__deploy">
  •     <h3>مثال لنص مستوحى من الأمثلة</h3>
  •     <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص</p>
  •   </div>

  • </section>


EmoticonEmoticon