اضافة خطاطة 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>