CSS-кнопки в стиле Apple
Если вы немного полазиете по их сайту, то найдёте весьма симпатичные синие кнопки. Там они сделаны в виде CSS-спрайтов, поэтому если вы захотите такие же на свой сайт, то придётся юзать фотошоп.
Однако есть и другой выход — дочитать эту статью до конца 🙂
Итак выкладываю кнопки на чистом 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, #377AD0); background-image:-moz-linear-gradient(0% 100% 90deg,#377AD0, #52A8E8); background-image: -o-linear-gradient(rgb(82,168,232),rgb(55,122,208)); background-color:#52A8E8; -moz-border-radius:23px; -webkit-border-radius:23px; border-radius:23px; border:1px solid #20559A; box-shadow:0 1px 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, #1967CA); background-image:-moz-linear-gradient(0% 100% 90deg,#1967CA, #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); }
Демо: живой пример (попробуйте навести на него курсор и понажимать)
Пару слов о кроссбраузерности. Так как мы использовали CSS-свойство gradient, то могут возникнуть некоторые проблемы при отображении в старых версиях браузера Opera, ну и box-shadow — это свойство CSS 3.
Миша
Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.
Пишите, если нужна помощь с сайтом или разработка с нуля.
How to support Apple’s dynamic type in your web content with CSS
UPDATE: December 2020 Now that Apple have rolled out these features to MacOS in Big Sur, think whether dynamic type is something you want on larger displays before applying the tricks below. A @media query may help to only qualify smaller displays, if you want to limit the trick to iPhones) Original article. iOS has a great accessibility feature for scaling the device’s text up (or down), but we usually only see it being used for native app content and interface elements. However, there’s actually a way to apply these user-defined font sizes to your web content too! To get started, set your html element’s font property to Apple’s system font:
html font: -apple-system-body; > On its own, this snippet of CSS will enable dynamic text sizing, but it also enforces Apple’s system font family too, which you may not want (and non-Apple devices will end up using a default serif font, unless you specify fallbacks in your font stack). Thankfully, there’s a way to use just the dynamic text sizing feature, without overriding whatever font family you want to use on all devices. First, we’re gonna wrap that earlier example in a CSS @supports conditional block, so it only targets Apple devices:
@supports (font: -apple-system-body) html font: -apple-system-body; > > If you’ve never seen @supports before, it’s a feature supported in modern browsers that allows you to write conditional CSS, based on the browser’s support for specific declarations (in this case, font: -apple-system-body ). Then, you’re free to specify your own font-family s and rem -based relative font-size s on descendant elements.
body font-family: Lobsters; /* or Papyrus / "Comic Sans MS" / any other objectively great font */ > p font-size: 1.25rem; > That’s it! You should now be able to write more accessible websites for Apple devices, without degrading the appearance on other platforms. Note: If you’ve already set a custom rem size in px on your html element, and want to maintain that on non-Apple devices, the font definition must be !important :
body font-size: 20px; > @supports (font: -apple-system-body) html font: -apple-system-body !important; > > Top comments (6)
Maybe I am doing something wrong but I am no longer able to use this method.
It appears that font: -apple-system-body has started to effect Safari on OSX and not just iOS devices as it did before. Which of course leads to a lot of unwanted design issues.
Do you have the same experience?
2 likes Like Comment button
I had exactly the same issue last week after upgrading to Big Sur.
It’s not ideal, but I’ve added a «small display» qualifier to my implementations to try to only target iPhones (in portrait orientation).
@supports (font: -apple-system-body) @media (max-width: 719px) html font: -apple-system-body !important; > > > 1 like Like Comment button
I know that this is just a concession of using the best resource available for the problem at hand, but arrgh, the fact that the web standards board hasn’t adopted a CSS filter for the width of the actual screen of a user’s device yet has turned the mere act of browsing the internet into one of the most aggravating activities I regularly do for the . [gestures vaguely] . part of my life.
I have a 1920×1080 screen, and can’t even put up two reference documents in split-view mode without both of them snapping to a single_column_flow layout that’s «optimized» for tablets, and suddenly the article’s lines go from being slightly longer than in an average paperback to running the entire width of a page in a cocktail table book.
Anyway. This is a useful CSS rule, thank you for sharing it on here 🦄💖🔖
1 like Like Comment button
I’m a full stack developer currently working in the public sector. I’m interested in accessibility, and user-driven design and experiences.
Customizing Style Sheets
Although configuring the viewport is an important way to optimize your web content for iOS, style sheets provide further techniques for optimizing. For example, use iOS CSS extensions to control text resizing and element highlighting. If you use conditional CSS, then you can use these settings without affecting the way other browsers render your webpages.
Read Optimizing Web Content for how to use conditional CSS and CSS Basics for how to add CSS to existing HTML. See Safari CSS Reference for a complete list of CSS properties supported by Safari.
Leveraging CSS3 Properties
There are many CSS3 properties available for you to use in Safari on the desktop and iOS. CSS properties that begin with -webkit- are usually proposed CSS3 properties or Apple extensions to CSS. For example, you can use the following CSS properties to emulate the iOS user interface:
Allows you to use an image as the border for a box. See CSS Property Functions for details.
Creates elements with rounded corners. See Customizing Form Controls for code samples. See CSS Property Functions for details.
Adjusting the Text Size
In addition to controlling the viewport, you can control the text size that Safari on iOS uses when rendering a block of text.
Adjusting the text size is important so that the text is legible when the user double-taps. If the user double-taps an HTML block element—such as a element—then Safari on iOS scales the viewport to fit the block width in the visible area. The first time a webpage is rendered, Safari on iOS gets the width of the block and determines an appropriate text scale so that the text is legible.
If the automatic text size-adjustment doesn’t work for your webpage, then you can either turn this feature off or specify your own scale as a percentage. For example, text in absolute-positioned elements might overflow the viewport after adjustment. Other pages might need a few minor adjustments to make them look better. In these cases, use the -webkit-text-size-adjust CSS property to change the default settings for any element that renders text.
Figure 4-1 compares a webpage rendered by Safari on iOS with -webkit-text-size-adjust set to auto , none , and 200% . On iPad, the default value for -webkit-text-size-adjust is none . On all other devices, the default value is auto .
To turn automatic text adjustment off, set -webkit-text-size-adjust to none as follows:
To change the text adjustment, set -webkit-text-size-adjust to a percentage value as follows, replacing 200% with your percentage:
Listing 4-1 shows setting this property for different types of blocks using inline style in HTML.
Listing 4-1 Setting the text size adjustment property
Controlling Layout with Fixed Positioning
CSS controls the placement of content within the viewport. Use the position CSS property to keep portions of the layout in view regardless of page scrolling. To use fixed positioning set the margins, padding, and size of an object with CSS. Then add the position property with a value of fixed as follows:
The fixed value enforces the other placement information regardless of scrolling and resizing.
For a demonstration of CSS positioning see Understanding Layout and Gestures in Safari on iOS and Lion from WWDC2011 . View WWDC 2013: What’s New in Safari and WebKit for Web Developers for other layout features like columns, pagination, flexible boxes, and CSS regions.
Highlighting Elements
By default, when the user taps a link or a JavaScript clickable element, Safari on iOS highlights the area in a transparent gray color. Using the -webkit-tap-highlight-color CSS property, you can either modify or disable this default behavior on your webpages.
The syntax for setting this CSS property is:
This is an inherited property that changes the tap highlight color, obeying the alpha value. If you don’t specify an alpha value, Safari on iOS applies a default alpha value to the color. To disable tap highlighting, set the alpha to 0 (invisible). If you set the alpha to 1.0 (opaque), then the element won’t be visible when tapped.
Listing 4-2 uses an alpha value of 0.4 for the custom highlight color shown on the right in Figure 4-2 .
Listing 4-2 Changing the tap highlight color
Note that changing this behavior does not affect the color of the information bubble when the user touches and holds.
You can also use the -webkit-tap-highlight-color CSS property in combination with setting a touch event to configure buttons to behave similar to the desktop. On iOS, mouse events are sent so quickly that the down or active state is never received. Therefore, the :active pseudo state is triggered only when there is a touch event set on the HTML element—for example, when ontouchstart is set on the element as follows:
Now when the button is tapped and held on iOS, the button changes to the specified color without the surrounding transparent gray color appearing.
Read Handling Events for the definition of a clickable element. See -webkit-tap-highlight-color to learn more about this property. Read Handling Multi-Touch Events for details on touch events.
Copyright © 2016 Apple Inc. All Rights Reserved. Terms of Use | Privacy Policy | Updated: 2016-12-12