مطالب اصلی

مطالب وبلاگ

چگونه از کلاس کاذب hover در سی اس اس استفاده کنم؟

چگونه از کلاس کاذب hover در سی اس اس استفاده کنم؟

چگونه از کلاس کاذب hover در سی اس اس استفاده کنم؟

گام اول : کدنویسی اچ تی ام ال (html) ؛ ساختار بلاک مورد نظرمون رو ایجاد میکنیم. شامل عکس و عنوان عکس که می خواهیم افکت هاور را رویشان اعمال کنیم.

<div class="block">
    <img title="" alt="" src="/park.jpg">
    <div class="block-caption">
       عنوان عکس مورد نظر
    </div>
</div>

آموزش سی اس اس : طراحی روبان گوشه ی باکس

آموزش سی اس اس : طراحی روبان گوشه ی باکس

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

قدم اول : کدنویسی ساختار باکس و روبان

<div id="box-wrp">
<div class="rooban-wrp">
<div class="rooban">1coder.blog.ir</div>
</div>
</div>

قدم دوم : استایل باکس 

#box-wrp {
  margin: 50px auto;
  width: 280px;
  height: 370px;
  background: white;
  border-radius: 10px;
  box-shadow:0px 0px 8px rgba(0,0,0,0.3);
  position: relative;
  z-index: 90;
}

فیلم آموزش سی اس اس ، افکت محو شدن تصویر

در این مطلب در خدمت تون هستم با فیلم آموزش سی اس اس نحوه ی پنهان کردن یک تصویر و نمایش تصویر دیگر  را آموزش بدهم ، امیدوارم براتون مفید باشه.( آموزش درخواستی کاربر) ؛ صفحه مربوط به دمو و کدها (کلیک کنید)

آموزش افکت محو نمودن یک تصویر بر روی تصویری دیگر با سی اس اس

آموزش افکت محو نمودن یک تصویر بر روی تصویری دیگر با سی اس اس

در این مطلب می خواهم نحوه ی پنهان کردن یک تصویر و نمایش تصویر دیگر با سی اس سی را آموزش بدهم ، امیدوارم براتون مفید باشه.( آموزش درخواستی کاربر)

مرحله اول  : با استفاده از اچ تی ام ال یک باکس هم اندازه با تصویر مورد نظرمون ایجاد میکنیم.

<div class="balochdesign"></div>

مرحله دوم : سپس تصاویر مورد نظرمون رو داخل باکس میگذاریم. برای هر تصویر یک نام کلاس در نظر می گیریم. (برای اعمال استایل)

<div class="balochdesign">
<img class="ax1" src="http://lorempixel.com/200/200" />
<img class="ax2" src="http://lorempixel.com/200/200/sports" />
</div>

چگونه با سی اس اس رنگ متن انتخاب شده را تغییر بدهیم؟

چگونه با سی اس اس رنگ متن انتخاب شده را تغییر بدهیم؟

اگر اهل وبگردی هستید و یا کدنویس وب شاید دیده باشید که در بعضی از صفحات ، " بعنوان مثال در همین صفحه اگه شما یک متن را انتخاب کنید رنگ متن و پس زمینه آن تغییر میکند. " شاید دوست داشته باشید که این امکان را به وبلاگ یا صفحات خود اضافه کنید و یا اینکه بدانید چگونه با سی اس اس رنگ متن انتخاب شده را تغییر بدهیم؟

کافیست شما کد زیر را به کدهای استایل ( فایل CSS ) خود اضافه کنید.

تبدیل قالب PSD به کد ریسپانسیو

تبدیل قالب PSD به کد ریسپانسیو

با سلام خدمت بازدیدکنندگان عزیز ! یه پیشنهاد خوب !  من قالب های PSD شما را به کد html5 و css3 تبدیل میکنم ؛ با هدیه! ریسپانسیو سازی قالب و تبدیل رایگان آن به بلاگ بیان! کافیست که فقط فقط زیر همین مطلب فایل خود را از قسمت نظرات برام ارسال کنید.

ویژگی طرح تبدیل شده :

کاملا استاندارد W3C

استفاده از میکرودیتا ( اهمیت میکرودیتا در سئو)

کد بهینه و لود سریع

استفاده از فونت آیکون

و انجام افکت های درخواستی شما

هزینه بسیار مناسب + ریسپانسیو و ترجمه رایگان به بلاگ

لطفا طرح یا اسکرین شات با توضیحات ارسال شود تا با هزینه ی کمتری برایتان انجام شود ، موفق باشید

طراحی و کدنویسی صفحه نخست سایت کاریابی

طراحی و کدنویسی صفحه نخست سایت کاریابی

یه پروژه جدید گرفتم ، طراحی و کدنویسی یک وبسایت کاریابی.

صفحه نخست سایت را طراحی و کدنویسی کردم گفتم با شما اشتراک بگذارم! البته هنوز خودم تاییدش نکردم!

لطفا نظرات خود را بهم بگید مرسی از شما :)

اسکرین شات

پروژه دارای 11 صفحه می باشد باید ریسپانسیو باشند ، صفحه اینترو ، صفحه اصلی ، صفحه کارفرما و ... ، این دومین پروژه طراحی و کدنویسی اختصاصی یه سایت هست ( قالب وبلاگ و سایت وردپرسی قضیه اش جداس ). نماز و روزه های همتون قبول حق! :) !

پ.ن : بزودی یه قالب حرفه ای و ریسپانسیو برا بلاگ میذارم.

طراحی و کدنویسی وبسایت شخصی با html5 و css3

طراحی و کدنویسی وبسایت شخصی با html5 و css3

در این دوره آموزشی با هم یک وبسایت شخصی با html5 و css3 را از پایه طراحی و کدنویسی میکنیم.

بخش اول : تعریف و نیازمندی وبسایت

بخش دوم : طراحی سایت در فتوشاپ

بخش سوم : کدنویسی وبسایت

بخش چهارم:  استاندارد سازی و یکم سئو شاید

بخش آخر : اضافه کاری ( درخواست های کاربران، چند خط با جاوا اسکریپت!).

بخش اول : در حال آماده سازی ، بزودی منتشر می شود.

نظرات شما کمک خیلی زیادی برای بروز رسانی سریع این آموزش خواهد کرد و سبب خوشحالی من خواهد شد.

ابزارک ها

بالا