said
10-30-2013, بتوقيت غرينيتش 09:50 PM
http://www.dzbatna.com/images/icons/iconrote.gif ط§ظ„ط±ط³ظ… ط¨ Css ! ظ‡ظ„ ط³ظ…ط¹طھ ط¹ظ†ظ‡ طں (http://www.dzbatna.com/t2301685/)
بسم الله الرحمن الرحيم ..
مع تصفحي لموآقع الانترنت الاجنبية المهتمة بتطوير الموافع الكثيرة http://www.dzbatna.com/images/smilies/strongly.gif
المختلفة عن المحتوى العربي الضئيل ..
المهم طبعا لغتي الانجليزية ليست بالجيدة ..http://www.dzbatna.com/images/smilies/crazy.gif
ولكن احاول ان افهم المهم وجدت دروس للرسم ب css !!
نعم لقد استخدوا تقنية css3 استخداما صحيحا في صنع الدوآئر و المربعات ..
ساريكم امثلة .. وساعطيك كود code لكي تتفقدوه .. !
http://im42.gulfup.com/NECB8.png
الان اعطيكم الكود code لكي تتفقدوه وتخرجوا ابداعاتكم .. و ان شاء الله لو شفت تفاعل في الموضوع سيتم وضع دروس تفصيلية نقطة نقطة نقطة
هده التقنية متعبة ومحتاجة فهم شامل للتقنية الرائعة css3 !
لعمل اليد افتح ملف html
رمز Code:
<div class="wrapper"> <div class="hand-container"> <div class="upper-hand"> <div class="finger main-finger"> <div class="nail"></div> <ul class="wrinkle-cont"> <li class="wrinkle"></li> <li class="wrinkle"></li> <li class="wrinkle"></li> </ul> <ul class="wrinkle-cont second"> <li class="wrinkle"></li> <li class="wrinkle"></li> <li class="wrinkle"></li> </ul> </div> <div class="finger"></div> <div class="finger"></div> <div class="finger last-finger"></div> <div class="hand-body"></div> </div> <div class="thumb"> <div class="upper"></div> <div class="lower"></div> <div class="line"></div> </div> </div> <div class="suit-arm"> <div class="shirt"> <div class="details"></div> </div> </div> </div>
ومن ثم صفحة css وضع الكود code التالي ..
رمز Code:
$skin : rgba(255,227,210,1); $darkerskin : rgba(232,135,123,1); $nail : rgba(255,208,196,1); $naildown : rgba(225,178,166,1); $marine : rgba(41,52,158,1); .wrapper { -webkit-transform: scale(0.7); } * { box-sizing: border-box; } body { width: 100%; height: 100%; background: rgba(83,153,199,1); cursor: none; overflow:hidden; } .hand-container { position: absolute; top: 10px; left: 100px; } .upper-hand { width: 400px; min-height: 400px; position:absolute; z-index:10; .finger { border-left: 3px solid $darkerskin; background-color: $skin; width:80px; height:80px; float:left; margin-top:220px; &.last-finger { width:65px; } .wrinkle-cont { -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-margin-start: 0; -webkit-margin-end: 0; -webkit-padding-start: 0; margin-top:40px; &.second { margin-top:90px; } li.wrinkle { margin-bottom:4px; list-style:none; padding: 0; height:3px; width:100%; background:$darkerskin; } } } .main-finger { border-left: none; height:300px; margin-top:0; padding: 0 12px; &:before { content:''; display:none; } .nail { height: 70px; width: 100%; background:$nail; &:after { content:''; height:15px; width: 100%; background: #fff; display:block; } } } .hand-body { width:305px; background: $skin; height: 200px; float:left; //border-radius: 0 0 75px 75px; } } .thumb { top:300px; position:absolute; width:200px; height:200px; left: -20px; .lower { background: $skin; width:100px; height:150px; position:absolute; //display:none; -webkit-transform: rotate(-30deg); left: -22px; } .upper { background: $skin; width:100px; height:150px; left:-14px; top:-57px; -webkit-transform: rotate(45deg); position:absolute; } .line { position:absolute; height:120px; width:3px; background:$darkerskin; left:17px; top:-36px; } } .suit-arm { width:350px; height: 600px; top:580px; left: 70px; position:absolute; background: $marine; .shirt { width:320px; height: 70px; background: #fff; margin-top:-70px; margin-left: 30px; .details { width:45px; height:45px; background: #b7b7b7; float:right; margin: 15px; border-radius: 30px; } }
والسلام عليكم .. ، ! شوفوا الكود code ولو لاحظت تفاعل بسوي درس مفصل تفعيلي .
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
بسم الله الرحمن الرحيم ..
مع تصفحي لموآقع الانترنت الاجنبية المهتمة بتطوير الموافع الكثيرة http://www.dzbatna.com/images/smilies/strongly.gif
المختلفة عن المحتوى العربي الضئيل ..
المهم طبعا لغتي الانجليزية ليست بالجيدة ..http://www.dzbatna.com/images/smilies/crazy.gif
ولكن احاول ان افهم المهم وجدت دروس للرسم ب css !!
نعم لقد استخدوا تقنية css3 استخداما صحيحا في صنع الدوآئر و المربعات ..
ساريكم امثلة .. وساعطيك كود code لكي تتفقدوه .. !
http://im42.gulfup.com/NECB8.png
الان اعطيكم الكود code لكي تتفقدوه وتخرجوا ابداعاتكم .. و ان شاء الله لو شفت تفاعل في الموضوع سيتم وضع دروس تفصيلية نقطة نقطة نقطة
هده التقنية متعبة ومحتاجة فهم شامل للتقنية الرائعة css3 !
لعمل اليد افتح ملف html
رمز Code:
<div class="wrapper"> <div class="hand-container"> <div class="upper-hand"> <div class="finger main-finger"> <div class="nail"></div> <ul class="wrinkle-cont"> <li class="wrinkle"></li> <li class="wrinkle"></li> <li class="wrinkle"></li> </ul> <ul class="wrinkle-cont second"> <li class="wrinkle"></li> <li class="wrinkle"></li> <li class="wrinkle"></li> </ul> </div> <div class="finger"></div> <div class="finger"></div> <div class="finger last-finger"></div> <div class="hand-body"></div> </div> <div class="thumb"> <div class="upper"></div> <div class="lower"></div> <div class="line"></div> </div> </div> <div class="suit-arm"> <div class="shirt"> <div class="details"></div> </div> </div> </div>
ومن ثم صفحة css وضع الكود code التالي ..
رمز Code:
$skin : rgba(255,227,210,1); $darkerskin : rgba(232,135,123,1); $nail : rgba(255,208,196,1); $naildown : rgba(225,178,166,1); $marine : rgba(41,52,158,1); .wrapper { -webkit-transform: scale(0.7); } * { box-sizing: border-box; } body { width: 100%; height: 100%; background: rgba(83,153,199,1); cursor: none; overflow:hidden; } .hand-container { position: absolute; top: 10px; left: 100px; } .upper-hand { width: 400px; min-height: 400px; position:absolute; z-index:10; .finger { border-left: 3px solid $darkerskin; background-color: $skin; width:80px; height:80px; float:left; margin-top:220px; &.last-finger { width:65px; } .wrinkle-cont { -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-margin-start: 0; -webkit-margin-end: 0; -webkit-padding-start: 0; margin-top:40px; &.second { margin-top:90px; } li.wrinkle { margin-bottom:4px; list-style:none; padding: 0; height:3px; width:100%; background:$darkerskin; } } } .main-finger { border-left: none; height:300px; margin-top:0; padding: 0 12px; &:before { content:''; display:none; } .nail { height: 70px; width: 100%; background:$nail; &:after { content:''; height:15px; width: 100%; background: #fff; display:block; } } } .hand-body { width:305px; background: $skin; height: 200px; float:left; //border-radius: 0 0 75px 75px; } } .thumb { top:300px; position:absolute; width:200px; height:200px; left: -20px; .lower { background: $skin; width:100px; height:150px; position:absolute; //display:none; -webkit-transform: rotate(-30deg); left: -22px; } .upper { background: $skin; width:100px; height:150px; left:-14px; top:-57px; -webkit-transform: rotate(45deg); position:absolute; } .line { position:absolute; height:120px; width:3px; background:$darkerskin; left:17px; top:-36px; } } .suit-arm { width:350px; height: 600px; top:580px; left: 70px; position:absolute; background: $marine; .shirt { width:320px; height: 70px; background: #fff; margin-top:-70px; margin-left: 30px; .details { width:45px; height:45px; background: #b7b7b7; float:right; margin: 15px; border-radius: 30px; } }
والسلام عليكم .. ، ! شوفوا الكود code ولو لاحظت تفاعل بسوي درس مفصل تفعيلي .
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
