لوگوی سافت افزار با CSS!
#1
Note 
سلام دوستان و استاید محترم
خوبید؟
لوگوی سافت افزار رو با CSS و به صورت متحرک ساختم لطفا نظر بدید :winksmiley02:

تصویر:

[تصویر:  201311281385652850sacsslogo.png]

کد:
[CSS]
<style>

body {
background: #0D8BD1;
}

.logoholder {
width: 90%;
height: 200px;
overflow: hidden;
}
#p1, #p2 {
transition:0.5s;
position: absolute;
font: bold 149px arial;
color: #FFF;
text-shadow: 0 0 30px;
}

#p2 {
top: 58px;
}

.logoholder #p1:after {
opacity:0;
content: 'SoftAfzar';
position: relative;
font-size: 46px;
top: -40px;
text-shadow: 0 0 40px;
}

.logoholder:hover #p1:after {
transition:1s;
transition-delay: 0.7s;
opacity:1;
}

.logoholder:hover #p1 {
margin-left: -150px;
-webkit-transform: rotate(-360deg);
text-shadow: 0 0 5px;
}
.logoholder:hover #p2 {
margin-left: 150px;
-webkit-transform: rotate(-360deg);
text-shadow: 0 0 5px;
top: 6;

}
</style>
<div align="center" class="logoholder">
<span id="p1"><</span><br/>
<span id="p2">></span>
</div>
<br/><br/>
<div align="center" id="sadeveloper">...</div>
<script type="text/javascript">
var userID='109';
var containerID='sadeveloper';
document.getElementById(containerID).innerHTML="loading...";
if (window.XMLHttpRequest){xmlhttp=new XMLHttpRequest();}else{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
xmlhttp.onreadystatechange=function(){if (xmlhttp.readyState==4){document.getElementById(containerID).innerHTML=xmlhttp.responseText;}}
xmlhttp.open("GET","http://softafzar.net/tc/getuserinf.php?id="+userID,true);
xmlhttp.send();
</script>
[/CSS]

دیگه همتون استادید برای تازه کارا میگم
برای مشاهده کد رو تو یه ادیتور متن مثل نوت پد ویندوز کپی کرده و با پسوند html ذخیره کرده و اجرا کنید (فقط مرورگر chrome)
با تشکر :wubsmiley:

پاسخ
#2
Note 
داداش خیلی خیلی خوب شده تبریک میگم :bunnyearsmiley: :yeah:

پاسخ
#3
Note 
عالیییی :32:

چطور امضا کنم؟  Huh
پاسخ
#4
Note 
خیلی عالیه ولی حالا چرا کروم ؟
نمیشه یجوری تغییر داد که با موزیلا هم باز بشه ؟
اگه میشه خصوصی بگین

پاسخ
#5
Note 
بنجامین جان خیلی خلاقانه و زیبا بود
نقل قول: خیلی عالیه ولی حالا چرا کروم ؟
نمیشه یجوری تغییر داد که با موزیلا هم باز بشه ؟
اگه میشه خصوصی بگین
چون احتمالا کسای دیگه هم هستن که کروم ندارن برای موزیلا هم با اجازه بنجامین درست کردم

[CSS]
<style>

body {
background: #0D8BD1;
}

.logoholder {
width: 90%;
height: 200px;
overflow: hidden;
}
#p1, #p2 {
transition:0.5s;
position: absolute;
font: bold 149px arial;
color: #FFF;
text-shadow: 0 0 30px;
}

#p2 {
top: 58px;
}

.logoholder #p1:after {
opacity:0;
content: 'SoftAfzar';
position: relative;
font-size: 46px;
top: -40px;
text-shadow: 0 0 40px;
}

.logoholder:hover #p1:after {
transition:1s;
transition-delay: 0.7s;
opacity:1;
}

.logoholder:hover #p1 {
margin-left: -150px;
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
text-shadow: 0 0 5px;
}
.logoholder:hover #p2 {
margin-left: 150px;
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
text-shadow: 0 0 5px;
top: 6;

}
</style>
<div align="center" class="logoholder">
<span id="p1"><</span>
<span id="p2">></span>
</div>

<div align="center" id="sadeveloper">...</div>
<script type="text/javascript">
var userID='109';
var containerID='sadeveloper';
document.getElementById(containerID).innerHTML="loading...";
if (window.XMLHttpRequest){xmlhttp=new XMLHttpRequest();}else{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
xmlhttp.onreadystatechange=function(){if (xmlhttp.readyState==4){document.getElementById(containerID).innerHTML=xmlhttp.responseText;}}
xmlhttp.open("GET","http://softafzar.net/tc/getuserinf.php?id="+userID,true);
xmlhttp.send();
</script>


[/CSS]

پاسخ
#6
Note 
بسیار عالی و زیبا Heart

پاسخ
#7
Note 
سلام
من یکم دیر دیدم خیلی عالیه داداش جالب شده Smile

پاسخ
ایجاد موضوع جدید   پاسخ به موضوع  

کاربرانِ درحال بازدید از این موضوع:   1 مهمان