إضافة رسالة ترحيبية أو صفحة قيد الإنشاء

اصبح Css يعمل أشياء وأشكال في منتهى الروعة والدقة واليوم سأظهر لكم قوة وروعة عمله في هذا العمل المجنون :) والذي أخذ من الموقع المحبوب لدي tympanus يمكنكم مشاهدة أمثلة مغايرة عما سأقدمه في هذه التدوينة من هنا ، غريبة !! هي فقط رسالة ترحيبية أو يمكن عملها كصفحة لموقع قيد الإنشاء والذي يظهرها بشكل رائع في التصميم ، أيضا يمكنكم إستعمالها في مدونتكم أو مواقعكم الشخصية إلى أني أراها ستزعج الزائر ، لذا هي فقط تظهر في الصفحة الرئيسية وبعد تجربتها بأنفسكم في المعاينة التالية

معاينة

شرح طريقة التركيب 

1 . توجه لقالب >> تحرير 

2. ابحث بإستعمال CTRL+F عن :  ]]></b:skin>

3. ضع الكود التالي فوقه

إضغط مرتيين لتحديد الكل

.sp-container {/* By Hm - http://www.ar1web.com*/
position: fixed;
display:none;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 99999999999999999999999999999999999;
background: -webkit-radial-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.9) 40%, rgba(0, 0, 0, 1));
background: -moz-radial-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.9) 40%, rgba(0, 0, 0, 1));
background: -ms-radial-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 1));
background: radial-gradient(rgba(0, 0, 0, 03.), rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 1));
-webkit-animation-name: tes;
-webkit-animation-duration: 1s;
-moz-animation-name: tes;
-moz-animation-duration: 1s;

}
.sp-content {/* By Hm - http://www.ar1web.com*/
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
z-index: 1000;
}
.sp-container h2 {/* By Hm - http://www.ar1web.com*/
position: absolute;
top: 50%;
line-height: 100px;
height: 100px;
margin-top: -50px;
font-size: 100px;
width: 100%;
text-align: center;
font-family: Electrolize,ge_ss_tvbold;
color: transparent;
-webkit-animation: blurFadeInOut 3s ease-in backwards;
-moz-animation: blurFadeInOut 3s ease-in backwards;
-ms-animation: blurFadeInOut 3s ease-in backwards;
animation: blurFadeInOut 3s ease-in backwards;
}
.sp-container h2.frame-1 {/* By Hm - http://www.ar1web.com*/
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
}
.sp-container h2.frame-2 {/* By Hm - http://www.ar1web.com*/
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-ms-animation-delay: 2s;
animation-delay: 2s;
}
.sp-container h2.frame-3 {/* By Hm - http://www.ar1web.com*/
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-ms-animation-delay: 4s;
animation-delay: 4s;
}
.sp-container h2.frame-4 {/* By Hm - http://www.ar1web.com*/
font-size: 200px;
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.sp-container h2.frame-5 {/* By Hm - http://www.ar1web.com*/
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none;
color: transparent;
text-shadow: 0px 0px 1px #fff;
}
.sp-container h2.frame-5 span {/* By Hm - http://www.ar1web.com*/
-webkit-animation: blurFadeIn 3s ease-in 8s backwards;
-moz-animation: blurFadeIn 1s ease-in 8s backwards;
-ms-animation: blurFadeIn 3s ease-in 8s backwards;
animation: blurFadeIn 3s ease-in 8s backwards;
color: transparent;
text-shadow: 0px 0px 1px #fff;
}
.sp-container h2.frame-5 span:nth-child(2) {/* By Hm - http://www.ar1web.com*/
-webkit-animation-delay: 10s;
-moz-animation-delay: 10s;
-ms-animation-delay: 10s;
animation-delay: 10s;
}
.sp-container h2.frame-5 span:nth-child(3) {/* By Hm - http://www.ar1web.com*/
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.sp-circle-link {/* By Hm - http://www.ar1web.com*/
position: absolute;
left: 50%;
bottom: 100px;
margin-left: -50px;
text-align: center;
line-height: 100px;
width: 100px;
height: 100px;
background: #85373b;
color: #3f1616;
font-family: Electrolize,ge_ss_tvbold;
font-size: 25px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-animation: fadeInRotate 1s linear 14s backwards;
-moz-animation: fadeInRotate 1s linear 14s backwards;
-ms-animation: fadeInRotate 1s linear 14s backwards;
animation: fadeInRotate 1s linear 14s backwards;
-webkit-transform: scale(1) rotate(0deg);
-moz-transform: scale(1) rotate(0deg);
-o-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
border: 8px double rgba(255, 255, 255, 1 );
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
.sp-circle-link a{color:#fff;}
.sp-link {/* By Hm - http://www.ar1web.com*/
position: absolute;
bottom: 190px;
margin: auto;
text-align: center;
line-height: 100px;
width: 100%;
height: 100px;
font-size: 30px;
-webkit-animation: fadeInRotate 1s linear 14s backwards;
-moz-animation: fadeInRotate 1s linear 14s backwards;
-ms-animation: fadeInRotate 1s linear 14s backwards;
animation: fadeInRotate 1s linear 14s backwards;
-webkit-transform: scale(1) rotate(0deg);
-moz-transform: scale(1) rotate(0deg);
-o-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
}
.sp-link a{color:#fff;}

.sp-circle-link:hover {
background: #85373b;/* By Hm - http://www.ar1web.com*/
color: #fff;/* By Hm - http://www.ar1web.com*/
}
/* By Hm - http://www.ar1web.com*/
@-webkit-keyframes tes{/* By Hm - http://www.ar1web.com*/
0%{
left:-2200px;
}
100%{
left:0px;
}
}

/* By Hm - http://www.ar1web.com*/
@-moz-keyframes tes{/* By Hm - http://www.ar1web.com*/
0%{
left:-2200px;
}
100%{
left:0px;
}
}

@keyframes tes{/* By Hm - http://www.ar1web.com*/
0%{
left:-2200px;
}
100%{
left:0px;
}
}
@-webkit-keyframes blurFadeInOut{/* By Hm - http://www.ar1web.com*/
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-webkit-transform: scale(1.3);
}
20%,75%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-webkit-transform: scale(1);
}
100%{
opacity: 0;
text-shadow: 0px 0px 50px #fff;
-webkit-transform: scale(0);
}
}
@-webkit-keyframes blurFadeIn{/* By Hm - http://www.ar1web.com*/
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-webkit-transform: scale(1.3);
}
50%{
opacity: 0.5;
text-shadow: 0px 0px 10px #fff;
-webkit-transform: scale(1.1);
}
100%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-webkit-transform: scale(1);
}
}
@-webkit-keyframes fadeInRotate{/* By Hm - http://www.ar1web.com*/
0%{
opacity: 0;
-webkit-transform: scale(0) rotate(360deg);
}
100%{
opacity: 1;
-webkit-transform: scale(1) rotate(0deg);
}
}
/**/
@-moz-keyframes blurFadeInOut{/* By Hm - http://www.ar1web.com*/
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-moz-transform: scale(1.3);
}
20%,75%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-moz-transform: scale(1);
}
100%{
opacity: 0;
text-shadow: 0px 0px 50px #fff;
-moz-transform: scale(0);
}
}
@-moz-keyframes blurFadeIn{/* By Hm - http://www.ar1web.com*/
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-moz-transform: scale(1.3);
}
100%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-moz-transform: scale(1);
}
}
@-moz-keyframes fadeInRotate{/* By Hm - http://www.ar1web.com*/
0%{
opacity: 0;
-moz-transform: scale(0) rotate(360deg);
}
100%{
opacity: 1;
-moz-transform: scale(1) rotate(0deg);
}
}
@keyframes blurFadeInOut{/* By Hm - http://www.ar1web.com*/
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
transform: scale(1.3);
}
20%,75%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
transform: scale(1);
}
100%{
opacity: 0;
text-shadow: 0px 0px 50px #fff;
transform: scale(0);
}
}
@keyframes blurFadeIn{/* By Hm - http://www.ar1web.com*/
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
transform: scale(1.3);
}
50%{
opacity: 0.5;
text-shadow: 0px 0px 10px #fff;
transform: scale(1.1);
}
100%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
transform: scale(1);
}
}
@keyframes fadeInRotate{/* By Hm - http://www.ar1web.com*/
0%{
opacity: 0;
transform: scale(0) rotate(360deg);
}
100%{
opacity: 1;
transform: scale(1) rotate(0deg);
}
}

4. ابحث عن </head> ضع الكود الأتي فوقه

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.js' type='text/javascript'/>
<script src='https://ar1web-com.googlecode.com/svn/trunk/jquery.easing.1.3.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$curtainopen = false;
$(&quot;.sp-circle-link&quot;).click(function(){
$(this).blur();
if ($curtainopen == false){
$(this).stop().animate({bottom: &#39;0px&#39; }, {queue:false, duration:350, easing:&#39;easeOutBounce&#39;});
$(&quot;.sp-container&quot;).stop().animate({top:&#39;-2200px&#39;}, 2000 );
$curtainopen = true;
}else{
$(this).stop().animate({bottom: &#39;0px&#39; }, {queue:false, duration:350, easing:&#39;easeOutBounce&#39;});
$(&quot;.sp-container&quot;).stop().animate({top:&#39;-2200px&#39;}, 2000 );
$curtainopen = false;
}
return false;
});
});
</script>
</b:if>

5. ابحث عن <body> ضع الكود التالي أسفله

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
.sp-container {display:block}
</style>
</b:if></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='sp-container'>
<div class='sp-content'>
<h2 class='frame-1'>إنتظر</h2>
<h2 class='frame-2'>3</h2>
<h2 class='frame-3'>2</h2>
<h2 class='frame-4'>1</h2>
<h2 class='frame-5'>
<span>مرحبا بك</span>
<span>بمدونة </span>
<span>*****</span>
</h2>
<a class='sp-link' href='#'>www.*****.com</a>
<a class='sp-circle-link' href='#'>إفتح</a>
</div>
</div></b:if>

يمكنك تغيير اللون الاصفر بما تريده !!