Hannah Graves | Step Six


CSS & Java Interactivity


Interactivity

This involves creating reactions on your webpage based on user actions. Examples include rollovers, "like" buttons, photo sliders, and drop-down menus. Interactivity can enhance credibility and engagement, such as through comments on blog posts, polls, live chat, and social network forums


Hover States in CSS

Links can change appearance when hovered over, indicating they are interactive. Use CSS pseudo-classes like :hover to define these changes, such as color, underline, and cursor style. Remember to apply styles in the order of a, a:visited, a:hover, and a:active.
For Example here is my interactivity for the nav bar links above:

a

{

color:#3D6C6D;
text-decoration: none;

}

a:link

{

text-decoration: none;

}

a:visited

{

color: #3D6C6D;

}

a:hover

{

font-weight: 500;

}

a:hover, a:visited

{

outline: 0;

}


CSS Transitions

Transitions allow smooth changes in property values over time without JavaScript. You can specify transition details like delay, duration, property, and timing function, making elements transition between states smoothly.


Java Script

Essential for implementing interactivity in web design, JavaScript is versatile and widely used beyond web environments, including PDFs, site-specific browsers, and desktop widgets. Its capabilities extend to server-side applications, video games, desktop, and mobile applications, and network programming.