Web Interface Design

Learn How to Build Responsive Websites with HTML, CSS, and Media Queries

Back to classes

Choose a class
  • 1.3Tricks using :target

    The relatively new pseudo-class :target is primarily intended to be used for styling an HTML element that has been jumped to using an anchor. The pseudo-class selects elements whose ID appears as a hash also in the page’s URL. Here is an example.

    If you have the following link in a list of FAQs:

    you can highlight the reply visually as soon as the question is clicked on:

    The URL in the browser’s address line might, for instance, appear as follows:

    The highlighting is only removed again if another link is clicked on.

    Fig. 4 The reply is highlighted if a question is clicked on.

    The exercise files target_example.html and target_example.css are available in the folder css3_advanced for you to try out these options.

    1.3.1Pure CSS Lightbox

    You can also use the :target pseudo-class to achieve complex effects, such as a lightbox (images that are magnified when you click on them and overlay the webpage), completely without JavaScript:

    Fig. 5 Lightbox: The image that has been clicked on appears in front of a semi-transparent background that is superimposed across the webpage. There is a Close button in the top right and a caption at the bottom edge.

    The exercise files can be found in the support material under
    css3_advanced/target_lightbox.html and
    css3_advanced/styles/target_lightbox.css.

    Walkthrough: CSS Lightbox

    1. Open the files target_lightbox.html and target_lightbox.css. The HTML code has the following structure:

      These HTML elements perform the following functions:

      • The <figure> later forms the overlay for the lightbox with the semi-transparent background that completely covers the web page;
      • the ID lightbox_dante enables us to amend the design of the figure tag using the :target pseudo-class;
      • the lightbox_close link with the × (&times;) later forms the close button for the lightbox;
      • the link around the image jumps to the ID #lightbox_dante, thus opening the lightbox.
    2. We will start by designing the basic function of the lightbox. If the user clicks on the linked image, the browser jumps to the anchor #lightbox_dante. This turns the figure element into the target, and it can be designed in such a way that it is superimposed across the whole browser window. So, insert the following in the target_lightbox.css file:

      Assign any background color. Black or white is normally used with 50–80% opacity. Do not forget either to adapt previously assigned properties or to reset them to their default values! In this case, the property width:30% assigned before to all the figure elements is reset to auto.

    3. As there is currently no option available for closing the lightbox again, our next task is to design the Close button. It contains a dummy link # whose only purpose is to remove the :target again from the figure element.

      The button is hidden at the moment using display:none. So, we are going to display it:

      In this case too, you obviously need to insert .lightbox:target in front. This is because the button should only be visible as long as the lightbox is open.

      If you look carefully, you can now see the button as a tiny × in the top left corner of the lightbox. Choose whatever style you want for it (color, font-size, border, background, …) and ensure that it is absolutely positioned in the top right part of the lightbox. Assign a z-index so that the button does not disappear behind the image.

    4. The image currently occupies the entire width of the browser window. This is defined as width:100% in the selector figure img. This may work for images in landscape format, but this specification is not suitable for images in portrait format. So, we are going to improve the positioning of images in the lightbox:

      This helps center the image horizontally and vertically, also ensuring that images in portrait format can no longer be larger than the browser window. We use width:auto to reset the previously assigned width specification of 100%.

    5. We have now basically completed the task. All that remains is to add the caption. This also needs to be positioned absolutely, and the previously assigned properties need to be modified:

    6. Lastly, you can apply a transition to the whole lightbox to make it ease in and out:

    1.3.2Tabs

    Another option you can use with the :target pseudo-class is a tab layout:

    The exercise files can be found in the support material under
    css3_advanced/target_tabs.html and
    css3_advanced/styles/target_tabs.css.

    Exercise 2: CSS Tabs

    Open the file target_tabs.html. The HTML code has the following structure:

    In a surrounding div featuring the tabs class, there are four divs with the tab class. Each of the four divs also has a unique ID. Each of these tabs has a link with the tab_nav and tab_content class. The links operate later on as tab headings. They refer to the relevant ID.

    The layout in the target_tabs.css file is almost complete. Your task is to add the following functions to the CSS:

    1. Whenever you click on a tab, it should be visually highlighted (white background color). It should also overlap the top border of the content area so that the tab and content area appear as a single unit.
    2. Whenever you click on a tab, the relevant contents should be displayed. The other three content areas must be hidden (for example, by using display: none).
    3. If none of the tabs are clicked — for instance when loading the page for the first time — the last tab (in this case #tab4) should be displayed by default (the tab is highlighted, the other content areas are hidden). (This is a limitation of having a pure CSS solution without using JavaScript. As yet, CSS still does not offer any option for displaying the first tab by default.)1
      Fig. 6 The completed tab navigation
    ×

    Responsive Web Design

0

Demo mode: Learning progress will not be saved.

Register to save your learning progress