PDA

توجه ! این یک نسخه آرشیو شده میباشد و در این حالت شما عکسی را مشاهده نمیکنید برای مشاهده کامل متن و عکسها بر روی لینک مقابل کلیک کنید : آیا با CSS هم میتوان لوگو ساخت؟



Patira
2012/01/22, 10:26 PM
درود،در جواب این سوال می بایست گفت، با CSS3 امروزه هر کاری میشه کرد :دی

میخوام یه سری لوگو رو که با CSS هم میشه طراحیشون کرد رو خدمتتون قرار بدم.امیدوارم که مورد پسند واقع بشه...

اولین لوگو :
<meta charset="utf-8"><title></title><style>#adidas .canvas { background: #017ac3;}#adidas .icon { left: 230px; position: absolute; top: 10px;}#adidas .leaf-t1,#adidas .leaf-t2 { background: #fff; border-radius:204px/280px; clip:rect(18px 43px 255px 0px); height: 280px; position: absolute; top:-36px; width:194px;}#adidas .leaf-t2 { left:-109px; position: absolute; -o-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform:rotate(180deg); transform:rotate(180deg);}#adidas .leaf1 .leaf-t1,#adidas .leaf1 .leaf-t2 { height:250px;}#adidas .leaf2 .leaf-t1,#adidas .leaf2 .leaf-t2,#adidas .leaf3 .leaf-t1,#adidas .leaf3 .leaf-t2 { clip:rect(20px 38px 220px 0px ); height:240px;}#adidas .leaf1 { position: absolute; top:50px;}#adidas .leaf2 { left:-130px; position: absolute; top: 131px; -o-transform:rotate(-40deg); -moz-transform:rotate(-40deg); -ms-transform:rotate(-40deg); -webkit-transform:rotate(-40deg); transform:rotate(-40deg);}#adidas .leaf2 .leaf-t1,#adidas .leaf2 .leaf-t2 { border-radius:200px/287px; width:200px;}#adidas .leaf2 .leaf-t1 { left:5px;}#adidas .leaf2 .leaf-t2 { left:-120px;}#adidas .leaf3 { left:151px; position: absolute; top:77px; -o-transform:rotate(40deg); -moz-transform:rotate(40deg); -ms-transform:rotate(40deg); -webkit-transform:rotate(40deg); transform:rotate(40deg);}#adidas .leaf3 .leaf-t1,#adidas .leaf3 .leaf-t2 { border-radius:200px/287px; width:200px;}#adidas .leaf3 .leaf-t1 { left:4px;}#adidas .leaf3 .leaf-t2 { left:-121px;}#adidas .stripes { height: 50px; left:-19px; position: absolute; top:160px; width: 110px; z-index:10;}#adidas .stripe { background: #017ac3; height: 12px; left: -98px; margin-bottom:12px; position: relative; top:0px; width:320px;}#adidas .header h2 { text-indent: -57px;}/* general styles */.canvas { display: block; overflow: hidden; position: relative; top: 0px; text-indent:-9999px; z-index: 10;}.icon, .icon * { display: block; position: absolute;}.monitor,.monitor .canvas { height: 304px; width:540px;}.monitor { background: #000; border:30px solid #000; border-radius:20px; float:left; position:relative;}.monitor:before { /* shadow */ box-shadow: 0 360px 10px rgba(0,0,0,0.2); border-radius:50%; content: "#"; display: block; height: 20px; left: 30px; position: absolute; text-indent: -9999px; width: 540px;}.monitor:after { /* shine */ background: -webkit-linear-gradient(top left, rgba(255,255,255,0) 60%, rgba(255,255,255,0.2) 60%, rgba(255,255,255,0) 100%); border-radius:20px 20px 0 0; height: 364px; content: "#"; display: block; position: absolute; right: -30px; text-indent: -9999px; top:-30px; width:600px; z-index: 10;}</style>
<html><head><meta charset=utf-8 /><title></title><style>#adidas .canvas { background: #017ac3 (http://www.noandishaan.com/forums/usertag.php?do=list&action=hash&hash=017ac3)}#adidas .icon { left: 230px; position: absolute; top: 10px;}#adidas .leaf-t1,#adidas .leaf-t2 { background: #fff (http://www.noandishaan.com/forums/usertag.php?do=list&action=hash&hash=fff) border-radius:204px/280px; clip:rect(18px 43px 255px 0px); height: 280px; position: absolute; top:-36px; width:194px;}#adidas .leaf-t2 { left:-109px; position: absolute; -o-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform:rotate(180deg); transform:rotate(180deg);}#adidas .leaf1 .leaf-t1,#adidas .leaf1 .leaf-t2 { height:250px;}#adidas .leaf2 .leaf-t1,#adidas .leaf2 .leaf-t2,#adidas .leaf3 .leaf-t1,#adidas .leaf3 .leaf-t2 { clip:rect(20px 38px 220px 0px ); height:240px;}#adidas .leaf1 { position: absolute; top:50px;}#adidas .leaf2 { left:-130px; position: absolute; top: 131px; -o-transform:rotate(-40deg); -moz-transform:rotate(-40deg); -ms-transform:rotate(-40deg); -webkit-transform:rotate(-40deg); transform:rotate(-40deg);}#adidas .leaf2 .leaf-t1,#adidas .leaf2 .leaf-t2 { border-radius:200px/287px; width:200px;}#adidas .leaf2 .leaf-t1 { left:5px;}#adidas .leaf2 .leaf-t2 { left:-120px;}#adidas .leaf3 { left:151px; position: absolute; top:77px; -o-transform:rotate(40deg); -moz-transform:rotate(40deg); -ms-transform:rotate(40deg); -webkit-transform:rotate(40deg); transform:rotate(40deg);}#adidas .leaf3 .leaf-t1,#adidas .leaf3 .leaf-t2 { border-radius:200px/287px; width:200px;}#adidas .leaf3 .leaf-t1 { left:4px;}#adidas .leaf3 .leaf-t2 { left:-121px;}#adidas .stripes { height: 50px; left:-19px; position: absolute; top:160px; width: 110px; z-index:10;}#adidas .stripe { background: #017ac3 (http://www.noandishaan.com/forums/usertag.php?do=list&action=hash&hash=017ac3) height: 12px; left: -98px; margin-bottom:12px; position: relative; top:0px; width:320px;}#adidas .header h2 { text-indent: -57px;}/* general styles */.canvas { display: block; overflow: hidden; position: relative; top: 0px; text-indent:-9999px; z-index: 10;}.icon, .icon * { display: block; position: absolute;}.monitor,.monitor .canvas { height: 304px; width:540px;}.monitor { background: #000 (http://www.noandishaan.com/forums/usertag.php?do=list&action=hash&hash=000) border:30px solid #000 (http://www.noandishaan.com/forums/usertag.php?do=list&action=hash&hash=000) border-radius:20px; float:left; position:relative;}.monitor:before { /* shadow */ box-shadow: 0 360px 10px rgba(0,0,0,0.2); border-radius:50%; content: "#" (http://www.noandishaan.com/forums/usertag.php?do=list&action=hash&hash=%22) display: block; height: 20px; left: 30px; position: absolute; text-indent: -9999px; width: 540px;}.monitor:after { /* shine */ background: -webkit-linear-gradient(top left, rgba(255,255,255,0) 60%, rgba(255,255,255,0.2) 60%, rgba(255,255,255,0) 100%); border-radius:20px 20px 0 0; height: 364px; content: "#" (http://www.noandishaan.com/forums/usertag.php?do=list&action=hash&hash=%22) display: block; position: absolute; right: -30px; text-indent: -9999px; top:-30px; width:600px; z-index: 10;}</style></head><body> <div id="adidas"> <div class="monitor"> <div class="canvas"> <div class="icon"> <div class="leaf1"> <div class="leaf-t1"></div> <div class="leaf-t2"></div> </div> <div class="leaf2"> <div class="leaf-t1"></div> <div class="leaf-t2"></div> </div> <div class="leaf3"> <div class="leaf-t1"></div> <div class="leaf-t2"></div> </div> <div class="stripes"> <div class="stripe"></div> <div class="stripe"></div> <div class="stripe"></div> </div> </div> </div> </div> </div></body></html>

کد استفاده شده برای ساخت این لوگو را در پست بعدی قرار دادم...

منتظر لوگوهای جدید باشید...

Special_One
2012/01/22, 11:20 PM
تایید شد.

Patira
2012/01/22, 11:26 PM
متأسفانه به خوبی نمایش داده نشده،

کد هم دوباره قرار میدم :



<html><head><meta charset=utf-8 /><title></title><style>#adidas .canvas { background: #017ac3 (http://www.noandishaan.com/forums/usertag.php?do=list&action=hash&hash=017ac3)}#adidas .icon { left: 230px; position: absolute; top: 10px;}#adidas .leaf-t1,#adidas .leaf-t2 { background: #fff (http://www.noandishaan.com/forums/usertag.php?do=list&action=hash&hash=fff) border-radius:204px/280px; clip:rect(18px 43px 255px 0px); height: 280px; position: absolute; top:-36px; width:194px;}#adidas .leaf-t2 { left:-109px; position: absolute; -o-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform:rotate(180deg); transform:rotate(180deg);}#adidas .leaf1 .leaf-t1,#adidas .leaf1 .leaf-t2 { height:250px;}#adidas .leaf2 .leaf-t1,#adidas .leaf2 .leaf-t2,#adidas .leaf3 .leaf-t1,#adidas .leaf3 .leaf-t2 { clip:rect(20px 38px 220px 0px ); height:240px;}#adidas .leaf1 { position: absolute; top:50px;}#adidas .leaf2 { left:-130px; position: absolute; top: 131px; -o-transform:rotate(-40deg); -moz-transform:rotate(-40deg); -ms-transform:rotate(-40deg); -webkit-transform:rotate(-40deg); transform:rotate(-40deg);}#adidas .leaf2 .leaf-t1,#adidas .leaf2 .leaf-t2 { border-radius:200px/287px; width:200px;}#adidas .leaf2 .leaf-t1 { left:5px;}#adidas .leaf2 .leaf-t2 { left:-120px;}#adidas .leaf3 { left:151px; position: absolute; top:77px; -o-transform:rotate(40deg); -moz-transform:rotate(40deg); -ms-transform:rotate(40deg); -webkit-transform:rotate(40deg); transform:rotate(40deg);}#adidas .leaf3 .leaf-t1,#adidas .leaf3 .leaf-t2 { border-radius:200px/287px; width:200px;}#adidas .leaf3 .leaf-t1 { left:4px;}#adidas .leaf3 .leaf-t2 { left:-121px;}#adidas .stripes { height: 50px; left:-19px; position: absolute; top:160px; width: 110px; z-index:10;}#adidas .stripe { background: #017ac3 (http://www.noandishaan.com/forums/usertag.php?do=list&action=hash&hash=017ac3) height: 12px; left: -98px; margin-bottom:12px; position: relative; top:0px; width:320px;}#adidas .header h2 { text-indent: -57px;}/* general styles */.canvas { display: block; overflow: hidden; position: relative; top: 0px; text-indent:-9999px; z-index: 10;}.icon, .icon * { display: block; position: absolute;}.monitor,.monitor .canvas { height: 304px; width:540px;}.monitor { background: #000 (http://www.noandishaan.com/forums/usertag.php?do=list&action=hash&hash=000) border:30px solid #000 (http://www.noandishaan.com/forums/usertag.php?do=list&action=hash&hash=000) border-radius:20px; float:left; position:relative;}.monitor:before { /* shadow */ box-shadow: 0 360px 10px rgba(0,0,0,0.2); border-radius:50%; content: "#" (http://www.noandishaan.com/forums/usertag.php?do=list&action=hash&hash=%22) display: block; height: 20px; left: 30px; position: absolute; text-indent: -9999px; width: 540px;}.monitor:after { /* shine */ background: -webkit-linear-gradient(top left, rgba(255,255,255,0) 60%, rgba(255,255,255,0.2) 60%, rgba(255,255,255,0) 100%); border-radius:20px 20px 0 0; height: 364px; content: "#" (http://www.noandishaan.com/forums/usertag.php?do=list&action=hash&hash=%22) display: block; position: absolute; right: -30px; text-indent: -9999px; top:-30px; width:600px; z-index: 10;}</style></head><body> <div id="adidas"> <div class="monitor"> <div class="canvas"> <div class="icon"> <div class="leaf1"> <div class="leaf-t1"></div> <div class="leaf-t2"></div> </div> <div class="leaf2"> <div class="leaf-t1"></div> <div class="leaf-t2"></div> </div> <div class="leaf3"> <div class="leaf-t1"></div> <div class="leaf-t2"></div> </div> <div class="stripes"> <div class="stripe"></div> <div class="stripe"></div> <div class="stripe"></div> </div> </div> </div> </div> </div></body></html>

Amir Lord
2012/01/22, 11:42 PM
میشه فقط css هارو هم قرار بدید ؟ : دی

Patira
2012/01/22, 11:47 PM
درود،

خب CSS ها رو + HTML قرار دادم که بتونید نمایش بدید لوگو رو.

داخل همین کد HTML اول CSS رو نوشتم بعد HTML رو گذاشتم که با استفاده از اون ترتیب کلاس ها حفظ میشه و لوگو به درستی نمایش پیدا می کنه...

Mr.Ramin
2012/01/27, 06:07 PM
میشه فقط css هارو هم قرار بدید ؟ : دی

#adidas .canvas { background: #017ac3}#adidas .icon { left: 230px; position: absolute; top: 10px;}#adidas .leaf-t1,#adidas .leaf-t2 { background: #fff border-radius:204px/280px; clip:rect(18px 43px 255px 0px); height: 280px; position: absolute; top:-36px; width:194px;}#adidas .leaf-t2 { left:-109px; position: absolute; -o-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform:rotate(180deg); transform:rotate(180deg);}#adidas .leaf1 .leaf-t1,#adidas .leaf1 .leaf-t2 { height:250px;}#adidas .leaf2 .leaf-t1,#adidas .leaf2 .leaf-t2,#adidas .leaf3 .leaf-t1,#adidas .leaf3 .leaf-t2 { clip:rect(20px 38px 220px 0px ); height:240px;}#adidas .leaf1 { position: absolute; top:50px;}#adidas .leaf2 { left:-130px; position: absolute; top: 131px; -o-transform:rotate(-40deg); -moz-transform:rotate(-40deg); -ms-transform:rotate(-40deg); -webkit-transform:rotate(-40deg); transform:rotate(-40deg);}#adidas .leaf2 .leaf-t1,#adidas .leaf2 .leaf-t2 { border-radius:200px/287px; width:200px;}#adidas .leaf2 .leaf-t1 { left:5px;}#adidas .leaf2 .leaf-t2 { left:-120px;}#adidas .leaf3 { left:151px; position: absolute; top:77px; -o-transform:rotate(40deg); -moz-transform:rotate(40deg); -ms-transform:rotate(40deg); -webkit-transform:rotate(40deg); transform:rotate(40deg);}#adidas .leaf3 .leaf-t1,#adidas .leaf3 .leaf-t2 { border-radius:200px/287px; width:200px;}#adidas .leaf3 .leaf-t1 { left:4px;}#adidas .leaf3 .leaf-t2 { left:-121px;}#adidas .stripes { height: 50px; left:-19px; position: absolute; top:160px; width: 110px; z-index:10;}#adidas .stripe { background: #017ac3 height: 12px; left: -98px; margin-bottom:12px; position: relative; top:0px; width:320px;}#adidas .header h2 { text-indent: -57px;}/* general styles */.canvas { display: block; overflow: hidden; position: relative; top: 0px; text-indent:-9999px; z-index: 10;}.icon, .icon * { display: block; position: absolute;}.monitor,.monitor .canvas { height: 304px; width:540px;}.monitor { background: #000 border:30px solid #000 border-radius:20px; float:left; position:relative;}.monitor:before { /* shadow */ box-shadow: 0 360px 10px rgba(0,0,0,0.2); border-radius:50%; content: "#" display: block; height: 20px; left: 30px; position: absolute; text-indent: -9999px; width: 540px;}.monitor:after { /* shine */ background: -webkit-linear-gradient(top left, rgba(255,255,255,0) 60%, rgba(255,255,255,0.2) 60%, rgba(255,255,255,0) 100%); border-radius:20px 20px 0 0; height: 364px; content: "#" display: block; position: absolute; right: -30px; text-indent: -9999px; top:-30px; width:600px; z-index: 10;}