Quest Academy

Applied Visual Design

Introduction to the Applied Visual Design Challenges

Visual Design ในการพัฒนาเว็บเป็นหัวข้อกว้าง ๆ มันรวม ตัวอักษร ทฤษฎี สี กราปก ภาพเคลื่อนไหว และเค้าโครงPage เพื่อช่วยในการส่งข้อความของเว็บไซต์ คำจำกันความของการออกแบบที่ดีเป็นหัวข้อที่มีการพูดคุยกันเป็นอย่างดีโดยมีหนังสือหลายเล่มในหัวข้อนี้

ในระดับพื้นฐานเนื้อหาเว็บส่วนใหญ่ให้ข้อมูลแก่ผู้ใช้ การออกแบบภาพของ Page สามารถส่งผลต่อการนำเสนอประสบการณ์ของผู้ใช้ ในการพัฒนาเว็บ HTML จะให้โครสร้างและความหมายแก่เนื้อหาของ Page และ CSS จะควบคุมเค้าโครงและลักษณะที่ปรากฏ

ส่วนนี้ครอบคลุมเครื่องมือพื้นฐานบางอย่างที่นักพัฒนาใช้สร้างการออกแบบภาพของตนเอง

Applied Visual Design

Create Visual Balance Using the text-align Property

Adjust the Width of an Element Using the width Property

Adjust the Height of an Element Using the height Property

Use the strong Tag to Make Text Bold

Use the u Tag to Underline Text

Use the em Tag to Italicize Text

Use the s Tag to Strikethrough Text

Create a Horizontal Line Using the hr Element

Adjust the background-color Property of Text

Adjust the Size of a Header Versus a Paragraph Tag

Add a box-shadow to a Card-like Element

Decrease the Opacity of an Element

Use the text-transform Property to Make Text Uppercase

Set the font-size for Multiple Heading Elements

Set the font-weight for Multiple Heading Elements

Set the font-size of Paragraph Text

Set the line-height of Paragraphs

Adjust the Hover State of an Anchor Tag

Change an Element's Relative Position

Move a Relatively Positioned Element with CSS Offsets

Lock an Element to its Parent with Absolute Positioning

Lock an Element to the Browser Window with Fixed Positioning

Push Elements Left or Right with the float Property

Change the Position of Overlapping Elements with the z-index Property

Center an Element Horizontally Using the margin Property

Learn about Complementary Colors

Learn about Tertiary Colors

Adjust the Color of Various Elements to Complementary Colors

Adjust the Hue of a Color

Adjust the Tone of a Color

Create a Gradual CSS Linear Gradient

Use a CSS Linear Gradient to Create a Striped Element

Create Texture by Adding a Subtle Pattern as a Background Image

Use the CSS Transform scale Property to Change the Size of an Element

Use the CSS Transform scale Property to Scale an Element on Hover

Use the CSS Transform Property skewX to Skew an Element Along the X-Axis

Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis

Create a Graphic Using CSS

Create a More Complex Shape Using CSS and HTML

Learn How the CSS @keyframes and animation Properties Work

Use CSS Animation to Change the Hover State of a Button

Modify Fill Mode of an Animation

Create Movement Using CSS Animation

Create Visual Direction by Fading an Element from Left to Right

Animate Elements Continually Using an Infinite Animation Count

Make a CSS Heartbeat using an Infinite Animation Count

Animate Elements at Variable Rates

Animate Multiple Elements at Variable Rates

Change Animation Timing with Keywords

Learn How Bezier Curves Work

Use a Bezier Curve to Move a Graphic

Make Motion More Natural Using a Bezier Curve

Be the first to add a review.

Please, login to leave a review
Add to Wishlist

Archive

Price:
Free