HTML in apple style. Apple style CSS buttons
Introduction
When it comes to design, there is one company that is impossible not to remember. This is the Apple company - each product they have is the result of the work of a team of designers. The website of this company has also always attracted attention.
In this lesson we will make a gallery - a slideshow “a la” Apple. Approximately the same is used on the Apple website to present the company's products. We don't need PHP or a database to create it.
STEP 1 - XHTML
Let's take a closer look at the XHTML markup:
The idea is very simple - there are two main DIV containers - one with id=”menu” contains thumbnails, the second “slides” contains the slides themselves.
To add a new slide, you simply need to add new elements to both containers. Slides - pictures in JPG format, thumbnails - transparent PNG. But you can use other formats.
You can also paste any HTML code. For example, you can make a specific slide a link in the form of a picture.
It is very important that the slides have a specified height and width - they are used by jQuery to determine the scrolling area.
Also pay attention to the elements of the LI miniatures. The first one is assigned the fbar class to display a vertical dividing bar. Other elements are assigned the class menuItem - and they are used as slideshow control buttons.
Let's move on to the next step.
Step 2 - CSS
Let's take a look at our style sheet.
Body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label( /* Page reset */ margin:0px; padding:0px; ) body( /* Setting default text color, background and a font stack */ color:#444444; font-size:13px; background: #f2f2f2; font-family:Arial, Helvetica, sans-serif; */ -moz-box-shadow:0 0 3px #AAAAAA; -webkit-box-shadow:0 0 3px #AAAAAA; box-shadow:0 0 3px #AAAAAA; radius-bottomleft:4px; -webkit-border-bottom-left-radius:4px; border-bottom-left-radius:4px; -moz-border-radius-bottomright:4px; :4px; border-bottom-right-radius:4px; border:1px solid white; background:url(img/panel.jpg) repeat-x bottom center #ffffff; overflow:hidden; ) #slides( /* This is the slide area */ height:400px; /* jQuery changes the width later on to the sum of the widths of all the slides. */ width:920px; overflow:hidden; ) .slide( float:left; ) #menu( /* This is the container for the thumbnails */ height:45px; ) ul( margin:0px; padding:0px; ) li( /* Every thumbnail is a li element */ width:60px; display:inline -block; list-style:none; height:45px; overflow:hidden; ) li.inact:hover( /* The inactive state, highlighted on mouse over */ background:url(img/pic_bg.png) repeat; .act,li.act:hover( /* The active state of the thumb */ background:url(img/active_bg.png) no-repeat; ) li.act a( cursor:default; ) .fbar( /* The left-most vertical bar, next to the first thumbnail */ width:2px; background:url(img/divider.png) no-repeat right; ) li a( display:block; background:url(img/divider.png) no-repeat right; height:35px; padding-top:10px;
In this stylesheet we have used several CSS3 properties:
* box-shadow, there is a small shadow in the corners of the gallery. Using this property - you need to provide the X and Y coordinates (0 0 here), blur (3px in our example) and shadow color;
* border-radius, round borders at the bottom of the gallery.
Unfortunately, these properties only work in Safari, Chrome and Firefox at the moment.
Now it's time for the jQuery magic.
STEP 3 - jQuery
We will need the following code:
$(document).ready(function())(
/* This code is executed after the DOM has been completely loaded */
var totWidth=0;
var positions = new Array();
$("#slides .slide").each(function(i)(
/* Loop through all the slides and store their accumulative widths in totWidth */
positions[i]= totWidth;
totWidth += $(this).width();
/* The positions array contains each slide"s commulutative offset from the left part of the container */
if(!$(this).width())
{
alert("Please, fill in width & height for all your images!");
return false;
}
});
$("#slides").width(totWidth);
/* Change the cotnainer div"s width to the exact width of all the slides combined */
$("#menu ul li a").click(function(e)(
/* On a thumbnail click */
$("li.menuItem").removeClass("act").addClass("inact");
$(this).parent().addClass("act");
var pos = $(this).parent().prevAll(".menuItem").length;
$("#slides").stop().animate((marginLeft:-positions+"px"),450);
/* Start the sliding animation */
e.preventDefault();
/* Prevent the default action of the link */
});
$("#menu ul li.menuItem:first").addClass("act").siblings().addClass("inact");
/* On page load, mark the first thumbnail as active */
});
The main idea is that the slides are repeated cyclically, the width of the slides is summed up and this width is assigned to the container. Since the slides are left-aligned, they have plenty of space to sit next to each other.
When you click on a thumbnail, the script calculates which slide to show and scrolls them by assigning a negative padding value using the animate method.
Just 40 lines of code and our slideshow gallery is ready!
Conclusion
It only took us three steps to create a super beautiful Apple-style gallery. It can decorate any website.
Yabloko's design has always been very popular among my clients. When it comes to design, I'm often told "I need a simple design with a light gray background" and use apple.com as an example.
If you poke around their site a little, you'll find some really nice blue buttons. There they are made in the form, so if you want the same ones for your website, you will have to use Photoshop.
So I lay out the buttons in pure CSS:
Apple-button ( cursor : pointer ; padding : 3px 10px; text-decoration : none ; color : #fff ; font-size : 13px; text-shadow : 0 -1px 1px rgba(0 , 0 , 0 , .3) ; background-image :-webkit-linear-gradient(#52A8E8 , #377 AD0 #377 AD0 , #52A8E8 ) ; background-image : -o-linear-gradient(rgb (82 , 168 , 232 ) , rgb (55 , 122 , 208 ) ; background-color : #52A8E8 ; -moz-border-radius : 23px; border-radius : 1px solid #205 59A ; 2px rgba(0 , 0 , 0 , .5) , inset 0 1px 0 rgba(255 , 255 , 255 , .3) ; .apple-button :hover , .apple-button :focus ( background-image :-webkit -linear- gradient(#54A1D8 , #196 7CA ) ; background-image :-moz-linear- gradient(0 % 100 % 90deg, #196 7CA , #54A1D8 ) ; background-image : -o-linear-gradient(rgb (84 , 161 , 216 ) , rgb (25 , 103 , 202 ) ) ; background-color : #52A8E8 ; box-shadow: 0 1px 0 rgba(255 , 255 , 255 , .6) , inset 0 1px 0 rgba( 255, 255, 255, .3) ;
) .apple-button :active ( background-color : #2D7CD1 ; box-shadow : 0 1px 1px rgba(255 , 255 , 255 , .5) , inset 0 2px 5px rgba(0 , 0 , 100 , .5) ; )
Demo: live example (try hovering over it and clicking)
A few words about cross-browser compatibility. Since we used the CSS gradient property, some problems may arise when displayed in older versions of the Opera browser, and box-shadow is a CSS 3 property.Misha
In recent years, for a long time I did not know what to do with the website, because it brings practically no profit, but recently I realized that my mission is to promote the spread of WordPress. After all, WordPress is the best engine for website development - both for those who are ready to use the built-in structure of this CMS, and for those who prefer headless solutions.
I myself first became acquainted with WordPress in 2009. Organizer. Teacher at Epic Skills and LoftSchool schools.
If you need help with your website or maybe even development from scratch in WordPress / WooCommerce - . My team and I will do everything for you at the best level.
Cupertino, California - On November 16, Apple announced the release of a new hardcover book titled "Designed by Apple in California." Two decades of design innovation are captured in 450 photographs of the company's past and present products, from the iMac (1998) to the Apple Pencil (2015). The book took 8 years to create and was dedicated to the memory of Steve Jobs.
“The idea of creating something important for humanity motivated Steve from the very beginning, this idea is our ethos and the purpose with which Apple moves into the future,” says Jony Ive.
“Designed by Apple in California” is the result of close collaboration between many teams of designers and specialists from completely different fields. They all share the hope that the book will give people an understanding of how and why Apple products are created and exist. All photographs were taken by Andrew Zuckerman in a technique he describes as a “deliberately modest style.” The photographs illustrate the details of the design process as well as the finished products themselves.
This is a book about design, but it's not about the designers themselves, the creative process, or product development. It objectively reflects Apple's style, image and design ideology. Many products look so clear, simple and logical that they seem to have no reasonable alternative. For each device, even the design of the tool with which it is made is thought out.
“As designers, we live in the future, love what we’ve already made, and obsess over what we haven’t yet made.”
“One of the most important things we have learned in our 20 years of working together is the need to listen to each other, because the brightest ideas are often those who speak very, very quietly.”
Designed by Apple in California is a limited edition book available in two formats: small (25.9 x 32.4 cm) for $199 and large (33 x 40.6 cm) for $299. It is printed on specially produced paper with a special coloring and matte silver-plated edges. Sold exclusively on Apple.com in the US, Australia, UK, Germany, Hong Kong, Korea, France, Japan and Taiwan, and at select Apple Stores.
Hello, dear readers! Web design and web development are evolving very quickly. Every day we see more and more new products, be it applications or new services, that make our online life more productive and convenient. And web design is simply a limitless space, limited only by the talent and skills of the “artist” (designer). So, today we’ll talk about LESS - a dynamic style markup language that will simplify the writing of CSS styles.
LESS is a superset of CSS. This means that any CSS code is valid LESS, but additional LESS elements will not work in plain CSS code. This is great because the existing CSS is already valid LESS code, which reduces the barrier to entry into the new technology.
LESS adds a lot of useful dynamic properties to . It introduces variables, operations, elements and mixins. Being able to write stylesheets modularly will save you a lot of hassle. 
LESS makes writing styles much easier. For example, using mixins, we create something like functions that can take arguments. Mixins allow you to include all the properties of a class in another class by simply including the class name as the value of one of the properties.
1 | Rounded-corners (@radius: 5px) ( |
And the compiled CSS will look like this:
1 | #header ( |
Load the prefix-free.js library and link it to index.html:
< script src= "prefix-free.js" type= "text/javascript" > |
Let’s finish the preparations here and move on directly to creating a menu in the Apple.com style
HTML markupThe menu layout is quite simple. The menu is based on an unordered list. Open the HTML editor and paste this code:
1 |
In this section we will start writing menu code in LESS language. For those who are new to programming, both writing and LESS syntax, don’t worry, I’ll try to break everything down to make it clear. Perhaps even someone will like this way of writing styles for a site, because it is really more productive.
Let's look at what components the menu will consist of: 
As we can see in the screenshot above, the Apple.com navigation has the following 6 main parts:
- Shadow is used;
- Border;
- Separator between menu items;
- Gradient for background;
- Dimming effect on mouse hover;
- Menu text.
You can use written styles in two ways:
- Crunch
Important: when using the first method, styles.less must be included before the less.js library is included! Also, don’t forget to connect prefix-free .
Thus, connecting styles looks like this:
1 |
|
We will use 2 files: config.less in it we will define all the variables, mixins, etc., after which we will import it into the second (styles.less) in which we will already create styles for the menu elements.
Now let's look at the code in config.less. Let's define the base color of the menu using variables. A variable in LESS is declared using the @ symbol.
In the code above I have not included a prefix for box-shadow , the prefix-free library will automatically add it. Additionally, the shadow color is inherited from the color of the @theme variable.
Let's define a style for the menu borders using mixins with a parameterFor our menu we will need a border with rounded corners. Mixins with a parameter - actually has the same functionality as a simple mixin, the only difference is that it also has a variable parameter.
1 | Border(@radius : 3px ) ( |
In the example above, we set the default @radius to 3 pixels and, as we said, this value can be changed.
Define the gradient, separator and hover style using operationsIn LESS, you can use operations to increment, decrement, divide, and multiply both property values and colors, allowing you to specify complex relationships between properties to achieve the desired result. Let's take a look at the following code, which sets the properties for the menu separator:
1 | Divider ( |
In the example above, we subtract the color #111 from the @theme variable, so the left side of the separator will be slightly darker than the base color, and the right side will be lighter. These are the manipulations we can do with HEX color.
To make color manipulation more clear, let's look at the color scheme: 
The maximum dark color is #000 (black), the maximum light color is #FFF (white) and the base color is #555. So, if we want a color three levels darker, we'll subtract #333 .
Now the gradient styles:
1 | Gradient ( |
We plan to use 2 text colors and text shadow colors. One option is used if the background of the menu is light then the text color is dark and vice versa.
First, if the text color does not have a brightness equal to or greater than 50%, then the shadow should darken, in this case the color #000000.
At this stage, we finish creating the config.less file and move on to creating the styles.less file
Import config.lessLet's create a file called styles.less and first of all attach the already created config.less to it, in the following way:
At the moment, the result of our work looks like this. 
Not very attractive yet. But there is still more to come.
Basic style for menus with nested rulesIn LESS, we can nest the styles of any element directly into the style of the parent. The navigation tag is nav HTML5 specification, which contains all the necessary elements for navigation. Here are his styles:
1 | nav( |
Notice that instead of writing a bunch of CSS rules, we just defined the height, width, and padding. While we pick up the border and its style, as well as the shadow using mixins, we specify the class name .border and .shadow and the rules of these classes, which we wrote in the config.less file, are added to the nav class. 
1 | nav( |
However, in LESS inheritance occurs differently, it is easier and more logical to understand:
1 | nav( |
As you can see in the picture, the elements of the li list are located vertically, but we need them to be positioned horizontally. To do this, set the property display:inline;
1 | nav( |
1 | nav( |
In the above example we are using the hex color #f2f2f2 , this color has a brightness of more than 50% so the shadow will be set to black automatically. The rest of the code I'm sure is quite obvious. 
li(
display: inline;
a (
text-decoration: none;
display: inline-block;
float: left;
width: 156px;
height: 45px;
text-align: center;
line-height: 300%;
.divider;
.gradient;
}
}
li: first-child a (
border-left : none ;
}
li: 50px auto 0 ;
width: 788px;
height: 45px;
.border;
.shadow;
ul (
padding: 0;
margin: 0;
li(
display: inline;
a (
text-decoration: none;
display: inline-block;
float: left;
width: 156px;
height: 45px;
text-align: center;
line-height: 300%;
.textcolor(#f2f2f2 ) ;
.divider;
.gradient;
&:hover (
.hovereffect;
}
}
}
li: first-child a (
border-left : none ;
}
li: last-child a (
border-right : none ;
}
}
}
Well, that’s all, writing apple.com can be completed here. It remains to decide how we will attach the written styles to the web page. As I mentioned above, you can use written styles in two ways:
- connect styles.less and the less.js library;
- or compile styles.less in the Crunch program and already attach regular styles.css to the page
Of course, the second option is better, why attach 2 files and do double work on the client side, so let’s compile the written LESS styles into regular static CSS.
To do this, click on the big Crunch It button! And keep the normal styles.css 
This concludes the lesson.
P.S.: Anyone can make such a simple menu, but if you need a really cool website with beautiful effects, then I can recommend you one of the best web studios in Ukraine. The guys will be able to make you a truly unique design, perform search engine optimization and promote your website!
Apple style web design has developed and evolved over the years since 1996. As the name suggests, the design idea belongs to Apple Corporation: the website and product interfaces were designed in this style. The Apple-style website design has gained wide popularity due to its minimalism and focusing the user’s attention on a specific product.
Characteristic features of Apple-style website design- in Apple style - an ideal way to present a product or service. This style is often used when designing online stores and promotional sites dedicated to any type of product: from training courses to real estate sales. This is what an Apple-style design looks like for software websites:
- Jumsoft http://www.jumsoft.com/money/