New Horizons Get Schooled Blog

Engage users with an elegantly simple background zoom (CSS)

Posted on 11/5/18 8:00 AM by Get Schooled in CSS

Engage users with an elegantly simple background zoom (CSS)A gentle zoom into a background image on a rollover state is an effective way to enhance the user experience of a website. With this subtle action, you can draw attention to an important link, send a visual cue of an available product for sale, or encourage a click for users to explore deeper.

Since the image zooms in when the user mouses over it, it literally draws the user closer. This isn’t the best solution for large backgrounds since most of the effect would be lost, but for small graphics, links—and especially e-commerce targets—the CSS background zoom is a pleasant and light-weight tool to enhance a brand and digital experience.

Visit: https://codepen.io/Tipue/pen/RQVzEp/ to see the code in action. Copy the HTML and CSS to your own site, and replace the background image with your own.

0 CommentsContinue Reading →

Control broken fragments with box-decoration-break (CSS)

Posted on 9/28/18 8:51 AM by Get Schooled in CSS

First introduced in CSS3, the box-decoration-break property is part of the organic development of visual coding. Before CSS3, there were no simple solutions to fragmented lines of text in a box. What you saw was what you got. Fortunately, the box-decoration-break property allows developers to control where the borders of a box decoration divide the fragments of a broken element. This can apply to end-of-line text, where columns divide and page breaks.

Add a box-decoration-break by creating a new class such as .break  {   box-decoration-break: clone; } and assigning the class to the appropriate element in the CSS. The value of the box-decoration-break can be either “slice” or “clone.” Slice will apply to the element as a whole and display breaks at the edges of each fragment. Clone applies decorations to each fragment as an individual element.

0 CommentsContinue Reading →

Overlay text on images with CSS to increase site optimization (Web Design)

Posted on 8/10/18 10:41 AM by Get Schooled in SEO, in web developer, in CSS

Do you cherry pick non-web-safe fonts when you’re looking for some visual variation? Take note: The web design process is smoother if you don’t. For front-end website developers, designs with custom fonts that are unusable online have to be merged into a single image, which is not beneficial for site optimization.

When front-end developers opt to use images with the text overlay included in the graphic, it saves a lot of time and effort because the developer does not have to create the additional styles to ensure that the text remains in the correct position and displays a consistent font. However, this shortcut does not do the website or user any favors in the long run.

Solution: To increase site optimization, use web-safe fonts in the design process and CSS to overlay text on images instead of as a single graphic. Not only does this make the text readable by search engines, but it also creates a more fluid experience for those accessing the site from a mobile device.

0 CommentsContinue Reading →

Avoid this easy mistake when troubleshooting CSS code (Cascading Style Sheets)

Posted on 7/13/17 9:49 AM by Get Schooled in CSS

One of the most common ways of troubleshooting code is to comment out certain parts to see how the application would behave without them. This technique is also highly useful with CSS, since you may want to test how a site would look with certain CSS selectors or property assignments removed. However, commenting sections out using "/*" and "*/" can have unintended effects if code comments (such as descriptions of each set of related selectors) already exist within the section you're trying to disable.

0 CommentsContinue Reading →

Comments in CSS and HTML

Posted on 1/27/12 2:43 PM by Get Schooled in advice, in CSS, in Guest Bloggers, in html, in New Horizons Computer Learning Center, in Tips & Tricks, in web design

0 CommentsContinue Reading →

Use ASP.NET's Visible property

Posted on 1/22/11 10:00 AM by Get Schooled in asp.net, in CSS, in html, in Tips & Tricks, in Visible property

Use ASP.NET's Visible property to do more than just hide the content (ASP.NET)

0 CommentsContinue Reading →

Search by Topic

    Lists by Topic

    see all

    Knowledge Ninjas

    a web-based service that allows software application end users to access a subject matter expert in real-time via a chat interface to resolve questions or problems they encounter in their specific software.

     

    Subscribe