menu

سی اس اس

CSS Positions

برای یه طراح front-end توی وب، تسلط CSS یه چیز ضروری هست و البته یادگیری و درک CSS هم چیز خیلی سختی نیست. کدهای CSS خیلی ساده و کوتاه هستند و تعدادشون هم خیلی کمه؛ ولی با این حال، یکی از قسمت هایی که درکش یکم سخت تر از بقیه ی جاهاست، CSS Positions هست. خیلی از ماها (حتی خود من) وقتی ظاهر یه المنت درست در نمیاد و اونجایی که میخواهیم قرار نمیگیره، میاییم یکی یکی Position های مختلف بهش میدیم تا بالاخره یکیش کار ما را راه بندازه! توی این پست قراره ما درباره ی CSS Positions صحبت کنیم و تفاوت های اونها با هم دیگه را بررسی کنیم

بیشتر بخوانید

پنجشنبه 25 شهریور 1395

WMatrix

نمیدونم تا حالا شما فیلم ماتریکس را دیده اید یا نه

احتمال این که اون را دیده باشید خیلی زیاده!

از اون فیلم هایی هست که هر ساله 5-6 بار تلویزیون پخش میکنه!

یکی از فیلم های خوش ساخته، و فیلم خوبی هم هست

اگه فیلم را دیدید، حتما اون صحنه ای را که Neo به ماهیت اصلی ماتریکس پی میبره و ماتریکس را درک میکنه و یهویی همه جا را تشکیل شده از کد میبینه یادتونه

بریم یه سری به دنیای ماتریکس بزنیم و اونو بیاریم توی وب

بیشتر بخوانید

جمعه 12 شهریور 1395

css trim

احتمالا تا حالا شما هم مثل من برایتان پیش آمده که یک متنی، از اندازه ی div که داخل آن هست بیشتر بوده و شما نیاز داشته اید که یک trim یا به اصطلاح برشی انجام دهید که حروف اضافه را نمایش ندهید و یک سه نقطه ای ته متن بگذارید به همراه یک لینک بیشتر بخوانید.

دقیقا مثل چیزی که توی صفحه ی خانه هست...

در این حالت شاید از روش های مختلفی استفاده کرده باشید، اما ساده ترین راه، استفاده از css هست.

خوشبختانه توی css3 یک خصیصه ای به اسم text-overflow اضافه شده است که دقیقا برای همین کارهاست...

بیشتر بخوانید

جمعه 19 دی 1393

فاصله از سمت راست و پایین در background position

مطمئنا تا حالا برای شما پیش آمده که برای یک element در صفحه، یه background image تعیین کنید.

و اگر سر و کار شما تا حالا به sprite image ها خورده باشه ( که انشا الله در یکی از مطالب بعدی در رابطه با آن ها توضیح خواهم داد) احتمالا مجبور به تنظیم position تصویر پس زمینه ی خود با استفاده از background-position شده اید.

در استفاده از background-position شما میتوانید دو مقدار را به عنوان ورودی تعیین کنید که مقدار اول، فاصله از سمت چپ و مقدار دوم، فاصله از بالا است. اما اگر بخواهید بجای بالا و سمت چپ، فاصله ها را از پایین و راست تعیین کنید چه باید کرد؟

بیشتر بخوانید

پنجشنبه 18 دی 1393

CSS3 filter

یکی از قسمت هایی که در CSS3 اضافه شده است، افزودن فیلتر های مختلف به یک تصویر است.

البته متاسفانه، مانند دیگر خصیصه های CSS3، این خصیصه نیز در مرورگرهای مختلف مشکلات مختلفی دارد که با کمی تلاش میتوان آن ها را رفع کرد.

اما این فیلتر ها چی هستند؟

دقیقا مانند فیلتر های ابزارهایی مانند فتوشاپ، شما با استفاده از این فیلتر ها میتوانید افکت های مختلفی را روی تصاویر خودتون اعمال کنید

مانند اعمالی اعم از blur و...

البته از خصیصه ی filter تنها برای تگ های img و یا background استفاده نمیشود و میتوان برای ها و متون هم استفاده کرد، اما تاثیری که برروی تصاویر میتواند ایجاد کند بسیار جذاب تر از متون است، برای همین در این مطلب، تنها تاثیر آن بر روی تصاویر را بررسی میکنیم.

پس اگر از این مطلب خوشتان آمد، در ادامه با ما باشید!

بیشتر بخوانید

پنجشنبه 29 آبان 1393

Sass و compass – استایل هایتان را متفاوت بنویسید

یکی از پیش پردازنده های جالب و معروف برای css، پیش پردازنده ی Sass هست که با استفاده از اون شما میتوانید css نوشتن را به شکلی متفاوت تجربه کنید! از نظر برخی ها، css نویسی بی قاعده.

توی این مطلب میخواهم شما را با این ابزار توسعه ی مدرن وب و یک ابزار دیگه به اسم Compass که بر اساس Sass نوشته شده است آشنا کنم.

بیشتر بخوانید

دوشنبه 23 تیر 1393

ترفند نوشتار در وب

یکی از مهم ترین قسمت های هر سایتی، بدون شک نوشتار(تایپوگرافی) اون میتواند باشد و استفاده از تکنیک ها و قوانین مناسب برای نوشته ها و متن ها اعم از سبک مناسب(زیر خط ها و برجسته کردن متن و...) و استفاده از فونت و اندازه ی مناسب متن میتونه تاثیر بسزایی توی جذب کاربران داشته باشد.

توی این پست میخواهم با یک تکنیک ساده، یک متن جالب با استفاده از css ایجاد کنم.

مطمئنا این بهترین عنوان برای این مطلب نیست، ولی عنوان بهتری پیدا نکردم. نظر شما در رابطه با عنوان این مطلب چیست؟

بیشتر بخوانید

یکشنبه 22 تیر 1393