نگاهی به انتخابگر متن در CSS یا CSS Selection Styling

همیشه وقتی متنی از یک وبسایت رو با کلیک سمت چپ موسمون انتخاب میکنیم، یک رنگ آبی خاصی میاد زیرش. مثلا همین الان این جمله رو با موستون انتخاب کنید! میبینید که رنگ متن تغییر کرد (حالا زیرش آبی نشد ایندفعه) !

CSS ابزاری هست که به ما کمک میکنه آرایش متن و صفحه رو مطابق میلمون تغییر بدیم و چیزی رو بسازیم که دوست داریم. درسته؟ خب روزبه‌روز CSS در حال پیشرفته و امکانات جدید رو در اختیار طراحان وب قرار میده. نکته ای که امروز میخوام دربارش کمی صحبت کنم، کنترل انتخابگر متن در CSS هست. همینطور که در تصویر مجاور میبینید، میشه رنگ زمینه رو به دلخواه تغییر داد. من اینجا یه رنگ آبی باز استفاده کردم.

وپی ( webP ) چیست و چرا اهمیت دارد؟

۳۰ سپتامبر ، یعنی شش روز پیش گوگل قالب ( فُرمَت ) جدیدی از تصاویر به نام WebP رو معرفی کرد. اینطوری نوشته میشه: WebP اما اینطوری خونده میشه: weppy . به دلیله یه سری معضلاتی که وجود داره، گوگل اقداماتی رو در جهت رفعشون داره انجام میده. حجم عظیم داده‌ها که بیشتر از نوع تصویر هستند ، در دیتاسنترهای سایتهای بزرگ از جمله گوگل ، باعث شده که گوگل به فکر کاهش حجم تصاویر از طریق تغییر قالب اونها بیافته.

اهمیت این موضوع بسیار بالاست و علی‌رغم اینکه تغییر قالب و فرهنگ‌سازی استفاده از این فرمت در دنیا کار سختیه (!) ، اما گوگل با قدرت و نفوذ و تأثیری که در دنیای وب داره ، به نظرم خیلی راحت میتونه در این قضیه یک انقلاب بوجود بیاره. اما حالا بیاید یه بررسی کنیم ببنیم که این WebP چی هست و چرا اهمیت داره!

میخواهم طراح وب شوم – آموزش HTML به زبان ساده – روز اول

آموزش طراحی وب - روز اول - آموزش HTML

آموزش طراحی وب - روز اول - آموزش HTML

طبق قولی که داده بودم ، آموزش طراحی وب رو از پایه شروع میکنم. خب یک سوالی که ممکنه توی ذهن خیلی ها بوجود بیاد اینه که برای طراحی وب از چه نرم‌افزارهایی استفاده میکنیم. من یک سری برنامه خدمتتون معرفی میکنم که اینهارو میتونید خیلی راحت گیر بیارید و نصب کنید. برای طراحی ظاهر سایتها معمولا از برنامه‌ی فوتوشاپ استفاده میکنیم. این نرم‌افزار خودش خدائی هست توی بحث گرافیک. حجمش بالاست و دانلودش کار راحتی نیست. توی خیلی از مجموعه های نرم افزاری موجود در بازار هم پیدا میشه. خب برای نوشتن کدهامون از برنامه های مختلفی میتونیم استفاده کنیم. به عنوان مثال برنامه هایی مثل دریم وی ایور ( Dreamweaver ) ، یا پی اچ پی دیزاینر و یا از همه ساده تر ، نُت پَد ۲ استفاده کنید. نُتپد دو خوبیش اینه که همه زبونهای برنامه نویسی رو پشتیبانی میکنه و جالبه که متن‌باز هست و فارسی هم هست! البته باید زبان فارسیش رو دانلود و نصب کنید. خیلی سادست. من همین رو پیشنهاد میکنم. خُب حالا میریم سره اصل مطلب.

استفاده از PNG در اینترنت اکسپلورر محترم!

استفاده از اینترنت اکسپلورر ممنوع!

اول از همه اینکه استفاده از اینترنت اکسپلورر ممنوع لطفاً! خُب؟ مرسی!

هممون میدونیم که اینترنت اکسپلورر کلا هیچی نمیفهمه و اینکه که صفحات وب رو نمایش میده یکی از عجایب جهانه! (شوخی). وقتی از تصاویر با کیفیت و کم حجم با پسوند PNG در ساختار سایتمون استفاده میکنیم ، اینترنت اکسپلورر برای نمایششون با مشکل مواجه هست و در موارد و موتقع مختلف ، یه چیزائی بجای اونها نشون میده! خیلی از طراحان حرفه‌ای وب سایت ، توصیه اکید میکنن که بیخیاله اینترنت اکسپلورر! اما به هرحال درصد قابل توجهی از کاربرای سایتها از این مرورگراستفاده میکنن؛ و ما باید به اونها احترام بگذاریم و سایت رو برای مرورگر اونها هم تنظیم کنیم. حالا یه راه حل ساده بهتون یاد میدم که از این به بعد بتونید از فایلهای PNG با خیال راحت استفاده کنید.

ترفندی ساده برای بکارگیری CSS3 در مرورگر اینترنت اکسپلورر ۶ ، ۷ و ۸

CSS3 & IE 6 , 7 , 8

بکارگیری CSS3 در اینترنت اکسپلورهای ۶ ، ۷ و ۸

سلام.

مطمئنا میدونید که در طراحی وبسایت ، باید رابط گرافیکی یا به اصطلاح User Interface طوری طراحی بشه که توی همه مرورگرها از جمله اینترنت اکسپلورر ( نسخه های مختلف : ۶ ، ۷ ، ۸ ) ، فایرفاکس ، اُپرا ، کروم و …. شبیه به هم دیده بشه! ممکنه تاحالا به سایتهایی برخورد کرده باشید که ظاهری به هم ریخته داشتند. این موضوع دلیلش همین عدم همخوانی با مرورگر شما بوده. بگذریم… همه ما میدونیم که اینترنت اکسپلورر اصلا استانداردهای جدید وب رو پشتیبانی نمیکنه و CSS3 رو میتونم بگم به هیچ وجه! لذا امروز یک ترفند بهتون یاد میدم تا بتونید با اون ، راحت تر کد بنویسید و سرعت طراحی سایتتون بالا بره. آخه قبلا باید یکبار سایت رو برا همه مرورگرا طراحی میکردید ، بعد برای خانواده محترم اینترنت اکسپلورر هم ۳ بار! یعنی برا هر نسخه یکبار!

میخواهم طراح وب شوم ، از کجا شروع کنم؟

همیشه اولین سوالی که در ذهن افراد علاقه مند به طراحی وب پیش میاد همینه. اینکه چطوری باید شروع کنم؟ باید چه چیزهائی یاد بگیرم؟ آیا باید برنامه نویسی یاد بگیرم؟ چطور میشه طراح وب شد؟ چطوری یک وب سایت طراحی میشه؟ … و سوالاتی از این قبیل. خوب میخوام برای دوستان ِ علاقه مند ، کمی در همین خصوص بنویسم.
اوایل ، صفحات وب رو با زبان HTML طراحی میکردیم. این زبان ، یک زبان کاملا ایستا بوده و هست و هرچیزی که ما طراحی میکردیم ، دقیقا همون برای کاربرانمون نمایش داده میشد. وب سایت هایی که با این زبان طراحی میشدند ، در صورتی که به کوچکترین بروزرسانی‌ای نیاز داشتند ، افراد ، حالا یا با استفاده از برنامه هایی مثل فرات پیج و یا حرفه ای ها با کدنویسی ، نسبت به تغییر محتوای اون صفحات اقدام میکردند و فایل جدید رو با فایلی که روی سرور بود ، جایگزین میکردند تا تغییرات برای کاربران به نمایش در بیاد. خب این خیلی وحشتناک بود! همین موضوع باعث شد بشر دست به خلاقیت بزنه و زبانها و استانداردهایی رو تولید کنه که بتونه صفحات وب رو از این حالت ایستا خارج کنه و یک پویائی در اون بوجود بیاره.

دیگر نوشته ها