السلام عليكم ورحمة الله
نقية CSS3 سحب لأسفل
الكود
<html dir="rtl">
<head>
</head>
<style type="text/css">
div.css3droppanel {
position: relative;
margin: 0;
margin-bottom: 1em;
}
div.css3droppanel > div {
height: 10px;
padding: 5px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
background: #b5e5e0;
position: relative;
opacity: 0;
-moz-transition: all 0.2s ease-in-out 0.1s;
-o-transition: all 0.2s ease-in-out 0.1s;
-webkit-transition: all 0.2s ease-in-out 0.1s;
transition: all 0.2s ease-in-out 0.1s;
}
div.css3droppanel:after {
content: '';
display: block;
bottom: 0;
position: absolute;
width: 100%;
height: 10px;
box-shadow: 0 3px 8px gray, 3px 3px 4px brown inset;
background: #5a1619;
background: -moz-linear-gradient(top, rgba(118,36,41,1) 0%, rgba(117,5,11,1) 50%, rgba(56,38,39,0.72) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(118,36,41,1)), color-stop(50%,rgba(117,5,11,1)), color-stop(100%,rgba(56,38,39,0.72)));
background: -webkit-linear-gradient(top, rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%);
background: -o-linear-gradient(top, rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%);
background: -ms-linear-gradient(top, rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%);
background: linear-gradient(to bottom, rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%);
}
div.css3droppanel input[type="checkbox"] {
position: absolute;
right: 50px;
width: 60px;
height: 42px;
bottom: -34px;
z-index: 10;
cursor: pointer;
opacity: 0;
}
div.css3droppanel input[type="checkbox"]:checked ~ div {
height: 350px;
opacity: 1;
overflow: auto;
}
div.css3droppanel label {
position: absolute;
right: 50px;
width: 60px;
height: 42px;
bottom: -34px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
cursor: pointer;
z-index: 5;
background: #5a1619;
background: -moz-linear-gradient(top, rgba(118,36,41,1) 0%, rgba(117,5,11,1) 50%, rgba(124,31,32,0.72) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(118,36,41,1)), color-stop(50%,rgba(117,5,11,1)), color-stop(100%,rgba(124,31,32,0.72)));
background: -webkit-linear-gradient(top, rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(124,31,32,0.72) 100%);
background: -o-linear-gradient(top, rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(124,31,32,0.72) 100%);
background: -ms-linear-gradient(top, rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(124,31,32,0.72) 100%);
background: linear-gradient(to bottom, rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(124,31,32,0.72) 100%);
box-shadow: 0 3px 8px black, 5px 5px 6px brown inset, 0 -3px 3px rgba(152,41,47,0.7) inset, 0 5px 0 rgba(255,255,255,0.7) inset;
}
div.css3droppanel label:hover {
box-shadow: 0 3px 8px black, 5px 5px 6px brown inset, 0 -3px 3px rgba(152,41,47,0.7) inset, 0 5px 0 rgba(255,255,255,0.7) inset, 0 0 15px rgba(255,255,255,0.
inset;
}
div.css3droppanel label:after {
content: '';
position: absolute;
display: block;
width: 0;
height: 0;
border: 12px solid transparent;
border-color: white transparent transparent transparent;
top: 18px;
left: 18px;
box-shadow: 0 0 7px gray inset;
}
</style>
<body>
<div class="css3droppanel">
<input type="checkbox" id="paneltoggle" />
<label for="paneltoggle" title="Click to open Panel"></label>
<div class="content">
<p> هذا المنتدى هو ساحة نقاش و حوار رحب_<a href="https://zaharatb.yoo7.com/register">_لا تتردد في التسجل </a>انضمامك الى منتدى هو تشجيع وتحفيز على المزيد من العمل بين اعضاء ينتسبون إلى اسرة واحدة الوافية. إن المديرين و المشرفين على هذا المنتدى يسهرون على سيره بشكل يجعله منبع نشاط و تبادل شيق و بناء. و لن يترددوا بإلغاء و ايقاف أي مساهمات مشكوك بها أو ذات طابع تعسفي, لا أخلاقي او مهين لشخص أو جماعة. تتعهد إذاً بأن تتحلى بأخلاق عالية و تصرفات مثالية زهاء اعضاء المنتدى مهما اختلفت آراؤهم عن آرائك و أن تكون عضواً فعالاً و إيجابياً. أنت تقر أيضاً أن كل الآراء و الأفكار المتواجدة في مساهماتك هي تحت مسؤوليتك الشخصية و تعبر عن رأيك الشخصي المحض و لا علاقة أو مسؤولية لأعضاء المنتدى أو المديرين أو المشرفين أو أحلى منتدى بها. و بالتالي لا أحد غيرك يكون مسؤولاً قضائياً عن محتوى مساهماتك غيرك أنت فقط.
هذا المنتدى يستعمل ملفات الإرتباط (الكوكيز) لتخزين معلومات تخص رصيدك على جهازك. ملفات الإرتباط هذه لا تتضمن أية معلومات شخصية عنك, فائدتها فقط تحسين جودة التصفح في المنتدى. بالنسبة لبريدك الالكتروني , هو يُستعمل فقط لتأكيد عملية تسجيلك في المنتدى أو لإرسال كلمة السر الخاصة بك في حالة نسيانها.
</p>
<p>
زهرات البستان: <a href="https://zaharatb.yoo7.com/">زهرات البستان</a>, <a href="اكود جاهزة--css">اكود جاهزة--css</a>, <a href="https://zaharatb.yoo7.com/f98-montada"> أكواد جاهزة</a>
<a href="https://zaharatb.yoo7.com/register">لتسجيل بالضغط هنا </a>.
</p>
</div>
</div>
</body>
</html>
موضوع: نقية CSS3 سحب لأسفل 
الجمعة 7 ديسمبر - 4:54