لوگوی اوبونتو با html , css

[عرفان علیزاده]

کد html :

کد: [انتخاب]

<div class="main-container">
<div class="container">
<div class="full-circle"></div>
<div class="inner-full-circle"></div>
<div class="line top"></div>
<div class="line left"></div>
<div class="line right"></div>
<div class="top-circle medium-circle"></div>
<div class="left-circle medium-circle"></div>
<div class="right-circle medium-circle"></div>
<div class="main-top-circle small-circle"></div>
<div class="main-left-circle small-circle"></div>
<div class="main-right-circle small-circle"></div>
</div>
</div>

کد css :

کد: [انتخاب]

.main-container {
    width: 250px;
    height: 250px;
    -moz-border-radius: 125px;
    -webkit-border-radius: 125px;
    -o-border-radius: 125px;
    -ms-border-radius: 125px;
    border-radius: 125px;
    background-color: #dd4814;
    margin: 20px auto;
}

.container {
    -moz-transform: translate(50px,50px);
    -webkit-transform: translate(50px,50px);
    -o-transform: translate(50px,50px);
    -ms-transform: translate(50px,50px);
    transform: translate(50px,50px);
}

.full-circle {
    background-color: #FFFFFF;
    height: 150px;
    -moz-border-radius: 75px;
    -webkit-border-radius: 75px;
    -o-border-radius: 75px;
    -ms-border-radius: 75px;
    border-radius: 75px;
    width: 150px;
}

.inner-full-circle {
    background-color: #dd4814;
    height: 100px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    -o-border-radius: 50px;
    -ms-border-radius: 50px;
    border-radius: 50px;
    width: 100px;
    -moz-transform: translate(25px,-125px);
    -webkit-transform: translate(25px,-125px);
    -o-transform: translate(25px,-125px);
    -ms-transform: translate(25px,-125px);
    transform: translate(25px,-125px);
}

.line {
    width: 12px;
    height: 85px;
    background-color: #dd4814;
}

.top {
    -moz-transform: rotate(-40deg) translate(198px,-164px);
    -webkit-transform: rotate(-40deg) translate(198px,-164px);
    -o-transform: rotate(-40deg) translate(198px,-164px);
    -ms-transform: rotate(-40deg) translate(198px,-164px);
    transform: rotate(-40deg) translate(198px,-164px);
}

.left {
    -moz-transform: rotate(29deg) translate(-82px,-254px);
    -webkit-transform: rotate(29deg) translate(-82px,-254px);
    -o-transform: rotate(29deg) translate(-82px,-254px);
    -ms-transform: rotate(29deg) translate(-82px,-254px);
    transform: rotate(29deg) translate(-82px,-254px);
}

.right {
    -moz-transform: rotate(87deg) translate(-385px,-134px);
    -webkit-transform: rotate(87deg) translate(-385px,-134px);
    -o-transform: rotate(87deg) translate(-385px,-134px);
    -ms-transform: rotate(87deg) translate(-385px,-134px);
    transform: rotate(87deg) translate(-385px,-134px);
}

.medium-circle {
    background-color: #dd4814;
    height: 34px;
    -moz-border-radius: 17px;
    -webkit-border-radius: 17px;
    -o-border-radius: 17px;
    -ms-border-radius: 17px;
    border-radius: 17px;
    width: 34px;
    float: left;
}

.top-circle {
    -moz-transform: translate(97px,-516px);
    -webkit-transform: translate(97px,-516px);
    -o-transform: translate(97px,-516px);
    -ms-transform: translate(97px,-516px);
    transform: translate(97px,-516px);
}

.left-circle {
    -moz-transform: translate(-52px,-439px);
    -webkit-transform: translate(-52px,-439px);
    -o-transform: translate(-52px,-439px);
    -ms-transform: translate(-52px,-439px);
    transform: translate(-52px,-439px);
}

.right-circle {
    -moz-transform: translate(42px,-386px);
    -webkit-transform: translate(42px,-386px);
    -o-transform: translate(42px,-386px);
    -ms-transform: translate(42px,-386px);
    transform: translate(42px,-386px);
}

.small-circle {
    background-color: #ffffff;
    height: 26px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
    -o-border-radius: 13px;
    -ms-border-radius: 13px;
    border-radius: 13px;
    width: 26px;
    float: left;
}

.main-top-circle {
    -moz-transform: translate(1px,-515px);
    -webkit-transform: translate(1px,-515px);
    -o-transform: translate(1px,-515px);
    -ms-transform: translate(1px,-515px);
    transform: translate(1px,-515px);
}

.main-left-circle {
    -moz-transform: translate(-145px,-435px);
    -webkit-transform: translate(-145px,-435px);
    -o-transform: translate(-145px,-435px);
    -ms-transform: translate(-145px,-435px);
    transform: translate(-145px,-435px);
}

.main-right-circle {
    -moz-transform: translate(-39px,-381px);
    -webkit-transform: translate(-39px,-381px);
    -o-transform: translate(-39px,-381px);
    -ms-transform: translate(-39px,-381px);
    transform: translate(-39px,-381px);
}

[مهدی پیشگوی]

قشنگ بود. دستت درد نکنه

[milad.fashi]

دستت درد نکنه
میشد از امکانات canvas در html5 هم استفاده کرد.ولی فکر میکنم این کار بهتره و نیاز به استفاده از canvas نیست.
اما مزیت این روش نسبت به عکس png‌ چیه!؟ سرعت لود بیشتره.حجم سایت کمتر میشه.در این مورد هم بیشتر بحث بشه انگیزه برای طراحی ظاهر به این شکل بیشتر میشه

[عرفان علیزاده]

این مزیت هایی رو که گفتی کاملا درسته مخصوص تو موبایل
بعد اینکه با این روش  شما کد نویسی یاد میگیری و لوگوهایی مثل گوگل پلاس و فیسبوک و ... رو میتونی خیلی راحت طراحی کنی و لزومی به استفاده کردن از canvas و جاوا اسکریپت نیست

[دانیال بهزادی]

فکر نمی‌کنم با یه پرونده‌ی svg خیلی تفاوتی داشته باشه از نظر حجمی، ها؟

[samis]

فکر نمی‌کنم با یه پرونده‌ی svg خیلی تفاوتی داشته باشه از نظر حجمی، ها؟

درسته شاید زیاد فرق نداشته باشه اما استاندارد وب الان داره به این سمت حرکت میکنه.یعنی همه چی باید با html و css انجام بشه.اصلا برای همین جندساله مهندسا و طراحا دارن تو سر و کله ی هم میزنن که html5 رو جا بندازن

[دانیال بهزادی]

آخه تا جایی که اطلاع دارم svg  هم جزو استانداردهای وبه. اصلا یه پرونده xml هست که به صورت تصویر پردازش میشه

[samis]

آخه تا جایی که اطلاع دارم svg  هم جزو استانداردهای وبه. اصلا یه پرونده xml هست که به صورت تصویر پردازش میشه

بله درسته اما زمانی svg به عنوان یک استاندارد مطرح شد که سلطان بلامنازع تصاویر وب png بود . درحال حاضر هم در اکثر موارد تنها انتخاب میتونه svg باشه.اما بشخصه اگه چنین فایل cssی در اختیار داشته باشم ترجیح میدم که از اون استفاده کنم

[nixoeen]

اما استاندارد وب الان داره به این سمت حرکت میکنه.یعنی همه چی باید با html و css انجام بشه.

خیر، اینطور نیست. تصاویر و ویدئو و صدا هیچ وقت قرار نیست بصورت فایل css و html ارائه بشن. اگر دوست دارید بیشتر در مورد جهتی که وب در حال حرکت هست و اهداف HTML5 بدونید، این لینک می‌تونه براتون مفید باشه: لینک
در ضمن svg یک فایل Vector هست که برای اکثر تصاویر مناسب و قابل استفاده نیست و هیچ وقت با PNG یا JPEG مقایسه نمی‌شه.

[samis]

خیر، اینطور نیست. تصاویر و ویدئو و صدا هیچ وقت قرار نیست بصورت فایل css و html ارائه بشن.

شنیدن این حرف از معین عزیز واقعا عحیبه!!
کاملا مشخصه که html5 میخواد وابستگی به تکنولوژی های بیگانه ی صوتی و تصویری نظیر فلش رو از بین ببره.
در واقع اون چیزی که html5 میخواد نصبت به نسخه های قبلی درستش کنه اینه :
۱- هسته ساختمان صفحه
۲- ارائه بصری
۳- ابزار گرافیکی
۴- پشتیبانی بیشتر از رسانه
۵- بهبود استفاده از جاواسکریپت
...
که البته تمرکز اصلی بر روی مفهوم هر کدام از این بخش ها بوده است.یعنی همه طرز استفاده از تگ footer رو بلدن اما مسئله اینه که از لحاظ مفهومی و منطقی این تگ باید کجای صفحه و در چه مواردی استفاده شود؟
و یا تگ دردسر ساز aside چه کاربرد منطقی و چه جایگاه مفهومی دارد؟
درکل منظور من اینه که html5 داره به صورت خاص بر روی بهترین ارائه ی بصری ممکن کار میکنه تا نیازی به خیلی از دردسرهای سابق نباشه و همچنین با پشتیبانی هرچه بهتر از مالتی مدیا دارن شب و روز داد میزنن که ایهل الناس بیایید و فلش رو بزارید کنار و از تگ های html5 برای نمایش مالتی مدیا استفاده کنین.حالا شما میفرمایید که برای ویدیو هیچ برنامه ای ندارن؟!
برای درک بهتر تمامی این مسائل همون لینک شما الحق که رفرنس مناسبی است.
اما اینم خاطر نشان کنم که بسیاری از قوانین html5 هنوز جزء استاندارد w3c نیست و این هم هیچ منافاتی با عرایض بنده نداره چون درمورد اون چیزا اصلا حرفی نزدم.
اینم اضافه کنم که شما با استفاده از فرم های مدرن html5 تا حدود زیادی میتوانید وابستگی به ajax رو از بین ببرید.

برطبق اون چیزی که من طی این چند ساله از طراحان بزرگ دنیا خوندم و توصیه های اونا رو مدنظر قرار دادم ، توصیه ی همگی بر این بوده که تا حد ممکن تنها و تنها از html5 و css3 استفاده کنین:

HTML5 & CSS3

مولفان : الکسیس گلدستین ، لویس لازاریس و استلا ویل
در واقع هرچی که من گفتن حرفای این سه نویسنده بوده


اما در مورد svg هم باید عرض کنم که وکتوری بودن اون کاملا درسته و بازم هیچ منافاتی با عرایض بنده نداره.مشکل اینجاست که شما اصلا به صورت کاربردی به مسئله نگاه نکردین 
در واقع بخاطر اینکه بیشتر و بهتر با تقابل svg با png و تکنولوژی های قبلی آشنا بشید شما رو به وبلاگ استاد گرانقدرم راهنمایی میکنم که بیشک میتونه تخصصی ترین مرجع برای طراحان فارسی زبان باشه :
http://sallar.me/1392/03/16/svg-is-the-future/

البته اگه بازم ابهام و شبهه ای هست بنده درخدمتم

[nixoeen]

کاملا مشخصه که html5 میخواد وابستگی به تکنولوژی های بیگانه ی صوتی و تصویری نظیر فلش رو از بین ببره.

فلش یک نرم‌افزاره. بله، به این سمت می‌ریم که از فلش استفاده نکنیم.

نصبت

نسبت

حالا شما میفرمایید که برای ویدیو هیچ برنامه ای ندارن؟!

فایل ویدئویی (همچنین عکس) همیشه جدا خواهد بود و با تگ <video> می‌شه اون‌ها رو نمایش داد.

توصیه ی همگی بر این بوده که تا حد ممکن تنها و تنها از html5 و css3 استفاده کنین:

توصیه من هم همینه. و مسلما توی اون فایل‌های HTML5 و CSS3 به فایل‌های تصاویر لینک می‌دید

شما رو به وبلاگ استاد گرانقدرم راهنمایی میکنم که بیشک میتونه تخصصی ترین مرجع برای طراحان فارسی زبان باشه :
http://sallar.me/1392/03/16/svg-is-the-future/

کسی که فکر بکنه SVG جایگزین PNG می‌شه، هنوز تصور درستی از تفاوت Vector Graphics و Bitmap Graphics که مفاهیم پایه‌ای گرافیک هستند رو نداره. این‌ها دو چیز متفاوت هستند و هر کدوم کاربرد خودشون رو دارند.

[milad.fashi]

استفاده از CSS,HTML مزیت دیگه ای که داره اینه که شما میتونید سایتی رو طراحی کنید که با هر Resolution ای کار کنه.و با هر Density (چگالی) کار کنه.و به قول گوگل به جای پیکسل باید ا واحد DIP یا Density Independent Pixel باید استفاده کرد.و خروجی شما باید Multiple Screen Support باشه.که با استفاده از CSS,HTML و نیز عکس های SVG که Scalable Vector Graphic‌هستند میتونید به این هدف برسید

[Ma3X]

در تایید صحبت‌های نیکسوئین عزیز عرض می‌کنم:
۱. هیچ وقت قرار نبوده و نخواهد بود که فایل‌های ویدئویی و صوتی به‌صورت کد HTML در صفحه قرار داده بشن. این‌کار علاوه بر این‌که سرعت و کارایی رو به‌شدت پایین میاره، هیچ دلیل منظقی هم براش وجود نداره. اون چیزی که گفته می‌شه تعامل مالتی‌مدیا در HTML5 بهبود پیدا می‌کنه، اینه که پشتیبانی از صوت و ویدئو به‌صورت توکار توی خود HTML وجود داشته باشه و نیازی به نرم‌افزار جانبی (مثل فلش یا سیلورلایت) نباشه.

۲. SVG فرمت استاندارد تصاویر وکتور هست و کنسرسیوم وب این فرمت رو برای تصاویر وکتور به رسمیت میشناسه. مطمئنا پیاده‌سازی یک عکس SVG بهتر از پیاده‌سازی اون با کد HTML هست. ضمنا تصاویر وکتور اصلن قرار نیست کاملا جای بیت‌مپ‌ها رو بگیرن، فقط در برخی موارد استفاده از وکتور بهتر از بیتمپ هست (مثل آیکون‌ها، لوگو و مواردی از این قبیل) که در حال حاضر بسیاری این کار رو انجام دادند، نمونش Font Iconها.

۳. در حالت عادی بهتر هست که فایل‌های خارجی (شامل css, js, img, video, audio, ...) به‌صورت یک فایل جدا در صفحه پیوست بشن و کد مستقیما توی سند وجود نداشته باشه مگر موارد بسیار خاص که مثلن یک تصویر رو به‌صورت کد Base64 توی صفحه قرار می‌دن...