Free HTML5 CSS Website Templatestemplatemo provides a variety of free responsive Bootstrap themes and HTML5 CSS templates to download, modify and apply for your personal or commercial websites. Latest themes are responsive mobile- ready layouts based on Bootstrap and j. Query. They are released under Creative Commons 4.
International license. In addition, you can remove any credit link. Please contact us if you have any question. How to Create a Great Looking Search Box. The search box is one of the most important UI elements on a web page. Explaining its purpose is a rather moot point; anyone not currently living under a rock is already familiar with Google and search engines in general. A search box on a webpage performs a similar function and allows the user to find specific content on your website. It is an absolute necessity for most websites and does much to improve user- experience. In this tutorial, we will learn how to create a great looking search box using CSS (Cascading Style Sheets). This is an intermediate- level tutorial and requires some basic understanding of CSS, which you can learn from this course on CSS fundamentals. Creating the HTMLIn this example, we’ll create a simple search box that requires textual input and includes a search button on the right. Although quite basic, this search box can be easily modified to fit different websites. Before we can create the CSS, we need to build our HTML. Add the following code in a new HTML document. As always, I recommend that you type- in the code rather than pasting it directly; it just makes for better learning.< form>. This is what you should see: This creates a simple form with a text field and a submit button next to it. You can download free HTML5 CSS website templates, responsive Bootstrap layouts from templatemo. HTML CSS Tags Links Contact HTML5 CSS Bootstrap Templates Free Website Builder Free Website Templates Free BUSINESS Websites Free HTML5. If you're getting started with HTML5 you'll want to learn how to to develop a basic HTML5 template. Forums Premium HTML & CSS JavaScript PHP Ruby. While this code is pretty much straightforward, let’s look at some of the important details: placeholder: This is the text that shows up in the search field before you enter any input. You can change it to anything you like. This tells the browser that the search box requires some input for the form to work. Completely new to CSS and HTML? Learn the basics of web design in this primer on CSS & HTML. Adding the CSSThis form looks quite dull at the moment. Thankfully, we can use CSS to spice things up a bit. Create a new blank document and add the following CSS to it: form . This is what you should see: Quite an improvement! As we’ll see below, changing the colors of the form is quite easy with a few minor CSS tweaks. Let’s look at the CSS in more detail: This simply instructs the browser to set the width of the form to be 5. We’ve given it a top/bottom padding of 8px and a left/right padding of 1. We’ve also given it a background color using RGBA values, where the first three values refer to the RGB colors (Red, Green, Blue), and the final (. The lower the transparency value, the more transparent the element. A RGB value of (5. We’ve also given it a 0px border. This is just a precautionary measure to ensure that older browsers don’t give it a border by default. You can skip this step if you want to. This is the styling for the search button. A few things to note here: position: relative – The search button, by default, is placed to the right of the search box with a margin of a few pixels between the elements. Since we want the button to be right next to the search box, we’ve given it a relative position. Since the element now has relative position, we can shift it to the left by giving it a negative position. The top/bottom padding for the button is less than that for the search box because we’ll be adding a 2px border later. This code changes the background and text colors of the button. This is what our search box should look like on hover: Confused by all this CSS? Master CSS essentials in just a few hours with this incredible CSS 3 crash course! So far, we’ve created a standard search box that can be used with most websites with a few minor tweaks. But what if you wanted to add a bit more stylistic chutzpah to your search box? Fortunately, you can use CSS to create a lot more than change colors and add borders. Changing Placeholder Text Formatting. Changing the search box placeholder text formatting is a bit more complicated than it appears. Different browsers handle the placeholder text differently. Hence, any change requires altering the settings for each browser individually. Below, we’ll change the placeholder text color to red and the font to Helvetica Neue.: :- webkit- input- placeholder . Adding an indicator can be slightly tricky and requires the user of the : after pseudo- selector, as shown below. First of all, we need to wrap our search button in a < span> element in order to use the : after pseudo- selector: Now, add the following code to your CSS file: Here, we are essentially giving the . The result is as follows: Creating arrows yourself can be a bit tricky. A better option would be to use one of the many different CSS arrow creation tools available online, such as CSS Arrow Please and CSS Arrow Generator. This is just one of the many style additions you can make to your search box. You can add drop shadows, gradients, flat design, etc. You can learn more about mastering these CSS concepts in this course on advanced CSS training.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
December 2016
Categories |