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

صبح 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);

}

}

ابحث عن </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>

ابحث عن <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.ar1web.com</a>

<a class='sp-circle-link' href='#'>إفتح</a>

</div>

</div></b:if>

http://www.ar1web.co/2014/10/comming-soon-page.html