• لوگوی سافت افزار با 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 مهمان