طراحی خبرنامه در وردپرس

در ادامه آموزش قبل مربوط به آموزش Css که با کلیات Css آشنا شدید در این آموزش با طراحی خبرنامه در وردپرس آشنا خواهید شد که این طراحی بدون هیچ افزونه‌ای و با استفاده از چند استایل مهم و پرکاربرد در قالب یک پروژه کاربردی انجام خواهد شد.

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

---

شفافیت پس زمینه در Css

برای شفافیت پس زمینه می‌توان از دستور Opacity استفاده کرد که مقداری که به آن اختصاص داده می‌شود عددی بین 0 و 1 می‌باشد به این معنی که 0 برابر با کاملا شفاف و 1 برابر با بدون شفافیت می‌باشد.

ساخت کادر با Css

با استفاده از دستور Border می‌توان یک حاشیه اطراف یک عنصر ایجاد نمود. Border را می‌توان از نوع Solid (خط صاف)،  Dashed (خط تیره) و … قرار داد و همچنین باید میزان ضخامت و رنگ کادر یا حاشیه نیز مشخص شود. بطور مثال دستور زیر کادری به اندازه 6px به رنگ قرمز و از نوع خط صاف ایجاد خواهد کرد.

Border : 6px solid red

دستور border-redius طراحی خبرنامه در وردپرس

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

ایجاد سایه با Css

با دستور Box-Shadow در Css می‌توان به یک عنصر سایه اضافه کرد. که این مشخصه دارای چهار مقدار به شرح زیر می‌باشد:

Box-shadow: [horizontal offset] [vertical offset] [blur redius] [spread redius] [color]

اولین مقدار فاصله سایه با عنصر در راستای محور x می‌باشد که اگر این مقدار مثبت باشد در قسمت سمت راست عنصر نمایش داده می‌شود و اگر منفی باشد در قسمت سمت چپ عنصر نمایش داده خواهد شد.

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

مقدار سوم میزان محو شدن سایه را مشخص می‌کند و مقدار چهارم اندازه و به نحوی پهنای سایه را مشخص خواهد کرد. مقدار پنجم نیز مربوط به رنگ سایه می‌باشد.

دستور Overflow در Css

گاهی اوقات اندازه یک عنصر بزرگتر از فضای قابل استفاده می‌شود که با این ویژگی می‌توان مشخص کرد که بعد از سر ریز شدن عنصر چه اتفاقی بیافتند. این مشخصه دارای چهار مقداردهی Visible، hidden، Scroll و auto می‌باشد.

• در حالت hidden، درصورتیکه محتوا از طول و عرض عنصر تجاوز کرده باشد آن بخش اضافی نمایش داده نمی‌شود.
• در حالت Scroll، در صفحه برای آن عنصر اسکرول عمودی و افقی تحت هر شرایطی ایجاد خواهد شد. یعنی حتی اگر سرزیر رخ نداده باشد باز هم اسکرول نمایش داده خواهد شد.
• در حالت auto، درصورتیکه سرزیر رخ دهد و نیاز به اسکرول باشد، بصئرت هوشمندانه اسکرول افقی یا عمودی نمایش داده خواهد شد.

آموزش کاربردی طراحی خبرنامه در وردپرس

سرفصل های آموزش طراحی UI