element first: I use them on the Polypane website and whenever I see them in the wild they look fun and clever. "We wanted to offer the visitor the same experience as when he was a kid discovering a new toy.". You will receive a verification email shortly. A variety of rounded corners and opacity effects round out this clean look. "Our mission is nothing short of using technology to make the world a healthier place!" Decorative images and dramatic yellow accents throughout provide an alluring aesthetic. It's pretty surprising that a simple CSS trick can produce such a good effect!". "We spent many hours working on tiny details," co-founder and engineer Larry Gadea adds. Demo and Source code Link. Bunch-o-Buttons. a, a:visited { font-family: Enriqueta; font-size: 16px; color: #92864d; text-decoration: none; }, p { color: #605833; font-family: Enriqueta; font-size: 16px; padding: 10px 0; }, .post-info { border-top: 1px dashed #70673b; border-bottom: 1px dashed #70673b; font-size: 13px; margin: 15px 0 15px; padding: 3px; text-transform: uppercase; color: #bfb585; }, a.read-more { background-color: #605833; border-radius: 5px 5px 5px 5px; color: white; float: right; font-family: Enriqueta,Arial,sans-serif; text-transform: uppercase; font-size: 16px; padding: 3px 10px; }, a.read-more:hover { background-color: #92864d; border-radius: 5px 5px 5px 5px; text-decoration: none; }, blockquote p { color: #ffffff; font-family: 'Merriweather', serif; font-size: 30px; font-weight: 300; line-height: 40px; margin: 0 30px 40px; text-align: center; text-shadow: #2a8d7b -1px -1px; }, p.author { color: #217969; font-family: 'Helvetica Neue', sans-serif; font-size: 12px; font-weight: bold; line-height: 12px; letter-spacing: 3px; text-align: center; text-shadow: #53b4a2 1px 1px; text-transform: uppercase; }, p.author span { color: #217969; font-family: 'Helvetica Neue', sans-serif; font-style: italic; font-weight: normal; letter-spacing: normal; text-transform: none; }, All these examples were taken from Typespiration – a “show-and-tell” portal for CSS typography enthusiasts. London-based digital agency Traffic was briefed with developing a website that would appeal to a youth audience. #1. Thankful Registry enables couples to create a unique, personalised wedding registry from any gifts they desire from anywhere on the internet. The hard work shows in the site's aesthetic with strong typography and large, powerful images. It's one of the great examples of CSS being used to create amazing visuals. The content is focused, the information is clear, and the animations are silky-smooth. All in all, we wanted a completely custom feel throughout the site that mirrored who we are as a company and what our product does at its core. Creative Bloq is supported by its audience. Caaaaaaaat. I find that very interesting from a design perspective," says Iveson. Did we miss out your favourite example of CSS in action? Creating fresh websites and community solutions, Amazee Labs at bring your brand to the online world based on the modern open source framework Drupal. It's amazing what can be done with CSS these days. Create Beautiful tables with CSS3 . Web designer and illustrator Nolowene Nowak has created a fun online portfolio – a great example of CSS being used to brilliant effect. Gradient with Wrapper. I've always been a fan of video games and with the current level of browser support for CSS3 I was able to enjoy that level of animation and engineering through the CSS. CSS image opacity explained. Creative Bloq is part of Future plc, an international media group and leading digital publisher. The large header and well-designed episode list conveys that there's a personal touch to this design. 4. Well as you saw in the example above that how background color can … #2. 25 Cool CSS Animation Examples for Your Inspiration. It has no background and comes with bold labels, light blue button and soft box-shadow on focus for input fields. The team was looking for a reason to experiment with SVG and CSS animation, and this was the perfect opportunity. 90 CSS3 Button examples with cool Hover effects. With bands like Arcade Fire, Superchunk and The Mountain Goats on the roster, Merge Records in Durham, North Carolina, looked to local digital partner Newfangled to build a world-class ecommerce experience to match the quality of its artists. This card UI is both simple and beautiful. Lead designer and frontend developer Martin Pospisil of Madeo enjoyed working on the site. From envelope-inspired striped borders, to fun background textures, to the robustly rounded Omnes Pro font, the site instantly makes gathering addresses less of a drag. For the website that promotes the app, the "primary goal was to allow our customers to visualise how their own visitors can experience Envoy at their offices," explains co-founder and designer Vítor Lourenço. That’s because the color read triggers the brain cells that relate to food. Dependencies: font-awesome.css Consequently the new homepage uses a large, featured work banner to show off Station Four's most recent work. Legacy by Steve Stead. CSS is also great for adding motion to your sites – take a look at our guide to CSS animation examples and how to recreate them for some pointers. During development, Dumont used Zurb's Foundation: a responsive CSS framework built with Sass. The close button is offset a bit from the box, providing an easy-to-use interface. We had to figure out those logistics." Already creating sites for television networks, digital agencies, charities and businesses, it's clear that their site has impressed almost everyone. Please refresh the page and try again. "We're super-fans of Tech Review, so when Erik Pelletier [VP of product] approached us to work on the site, we were psyched," says Mike Swartz, partner at Upstatement. I mean, what’s there to hate about cats? Text in a border. With numerous different database calls on each page, the order of priority of the data was important to get right. Despite the primary goal of driving sign-ups for a petition, the Viget team has done an artful job of balancing the immediacy that the omnipresent call-to-action presents against the more emotionally compelling, story-driven content. Feature comparison tables can aid in decision-making and add meaning to an otherwise too technical product specification sheet. It plays on the idea that fishermen are famous for telling tall stories by bringing together some amazing 'true tales' of the monsters that lurk beneath the sea. Clark started with 'more crazy' CSS3 transitions and fades, but removed them, he tells us. Form Follows Function (FFF) is a beautifully designed showcase of HTML5 and CSS experiments by Korean developer Jongmin Kim who works as an interactive developer at Firstborn Multimedia in New York. Design studio Caava has a beautiful new site. You get dropdown buttons and group buttons along with the regular button design, which makes this pack really unique. h1 a:visited { font-family: Georgia, arial, serif; font-size: 38px; } The team didn't want to obscure these on any viewport and risk losing their significance. Contributors: Chris Cashdollar and Rich Clark. Check out the hover effects on the Pies page. CSS rotation transforms are used on header text, giving the site a fun print-menu feel. “What's unique is the work's presentation: visualising the project process, guiding visitors through it and telling a story about the work we've done,” says art direction lead Stefan Schuster. Instead of starting with the desktop, the site was built mobile-first. "I'm excited about how the site might grow, and get further refined and built out as this amazing venture becomes realised over time," says Mehta. As a result, you get a simple and engaging call-to-action button. The MIT Technology Review, a 117-year-old publication that covers technology in a way anyone can understand, was relaunched earlier this summer by Boston design studio Upstatement. .cf:before, If you use these examples in other sites, please ensure that you credit the designer. You’ll notice that many of the examples shown here take advantage of hover and click states in order to both share more detailed information and show off some incredible special effects. h1 { color: #111; font-family: 'Helvetica Neue', sans-serif; font-size: 275px; font-weight: bold; letter-spacing: -1px; line-height: 1; text-align: center; }, h2 { color: #111; font-family: 'Open Sans', sans-serif; font-size: 30px; font-weight: 300; line-height: 32px; margin: 0 0 72px; text-align: center; }, p { color: #685206; font-family: 'Helvetica Neue', sans-serif; font-size: 14px; line-height: 24px; margin: 0 0 24px; text-align: justify; text-justify: inter-word; }, h1 { color: #7c795d; font-family: 'Trocchi', serif; font-size: 45px; font-weight: normal; line-height: 48px; margin: 0; }, h2 { color: #7c795d; font-family: 'Source Sans Pro', sans-serif; font-size: 28px; font-weight: 400; line-height: 32px; margin: 0 0 24px; }, .subheader { font-size: 26px; font-weight: 300; color: #ffcc66; margin: 0 0 24px; }, p { color: #4c4a37; font-family: 'Source Sans Pro', sans-serif; font-size: 18px; line-height: 32px; margin: 0 0 24px; }, a { color: #ff9900; background: #fff4a3; text-decoration: none; }, h1 { color: #ffffff; font-family: 'Raleway',sans-serif; font-size: 62px; font-weight: 800; line-height: 72px; margin: 0 0 24px; text-align: center; text-transform: uppercase; }, h2 { color: #ffffff; font-family: 'Raleway',sans-serif; font-size: 30px; font-weight: 800; line-height: 36px; margin: 0 0 24px; text-align: center; }, p { color: #f8f8f8; font-family: 'Raleway',sans-serif; font-size: 18px; font-weight: 500; line-height: 32px; margin: 0 0 24px; }, a { color: #c8c8c8; text-decoration: underline; }, a:hover { color: #1c1c1c; text-decoration: underline; }, a, After doing some research, they found that most existing online information about typographic terminology used simple, static images. This is one of the best resources I have found in quite some time. Get code examples like "css beautiful gradients" instantly right from your google search results with the Grepper Chrome Extension. Fonts like Clarendon and Bryant provide a nice balance of sophistication and fun. When you’re reading stuff related to food, you’re going to find a lot of red color use. "We desired a site that was fluid, instant, and fun," remembers designer/developer Nick Keebaugh, "and that's exactly how our booth is. Each card has its own background photo – presumably to use a client’s photo or logo. Rounded corners, ribbons and clever hover states keep the site engagement entertaining. Responsive: yes. The site greets you with Kulturista typeface at an attention-grabbing 53px font size on top of a full-width, responsive hero image. How do I get a custom colored underline that will span multiple lines? Front and centre is the haunting art direction that compels you to stop and confront the emotional mission. Portfolio pieces are framed within wooden windows that have animated hovers. "We wrote a media query for these devices that changes the background-attachment from fixed to scroll and sets the individual background-positions so that the images sit in the right place," explained the Traffic team. Fully responsive as well, the site looks great on smaller layouts. Here we list 28 great examples of CSS sites that will provide a burst of web design inspiration. The below is the list of some beautiful CSS Typography examples which can vouch for the real beauty seen over these options. He reveals, "This involved masking the select boxes on the forms with an outer div, adding transparency, and the use of -webkit-appearance. To make the demo slightly interesting, I added a hover effect that slowly applies a glow. "Skeleton provides a really nice base set of widths to design for, so it just came down to tweaking a few items in the layout for each screen size," says Gaffney. It greatly affects the mood of the reader. However, it…, Portfolios are not a new trend in the industry. Beautiful CSS 3D Transform Examples CSS 3D transforms create depth and visually interesting elements on your page using perspective. 58. Collection of free HTML and CSS custom select box code examples: dropdown, multiple, custom arrow, etc. The beautiful, edge-to-edge photography and magazine-like layout made the effort to build it responsively a challenge. Learn more. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari. CSS transitions are used to help aid in the demonstration, enhancing the experience without ever getting in the way of the content. All rights reserved. "Postable has an incredibly playful look to it, especially for a web application, and I wanted to stay true to those designs," says frontend developer, Kevin Kneife. Because our target market don't seem to use it, there seemed little reason for Solo to support it.". True Fish Tales really hooks you in. You can follow him on Twitter. © 2013 WDExplorer All Rights Reserved. Paired with Miller Text for body copy, the typography feels classic yet contemporary. When he's not online, he's spending quality time with his friends and family. The Gently Mad is a topic-agnostic podcast about web creators. Visit our corporate site. As you scroll through the one-page site, the states update in the demo. Please deactivate your ad blocker in order to see our subscription offer, Type Terms was partly created as an excuse to experiment with CSS animation, Tech Review uses CSS to create a clean, Swiss feel, Bucketlistly enables travellers and adventurers share their stories and encourage others to have their own adventures, 96 Elephants is named after the number of elephants killed every day in Africa, CSS transitions are used to help aid in the Envoy demonstration, The style is minimal and uses the golden ratio as well as interesting typography, The large header and well-designed episode list conveys a personal touch to this design, With competence and confidence, this website is a beautiful example of CSS, CSS rotation transforms are used on header text, giving the A&W site a fun print-menu feel, Nolowene Nowak showcases her skills with this fun online portfolio, The website draws users in with hints of scrolling animation and parallax functions, Fitbit's site design is bright and lively, featuring icons and colourful statistics graphics, The team behind MammothReach created this cool photobooth MammothBooth, Lab Partners showcase their work with a colourful and decorative website, Pizza Brain is fully responsive and looks great on smaller layouts, Postable provides an easy way to capture mailing addresses, The website features colourful illustrations and cartoon styles, Libor Zezulka is a clean and clever personal portfolio, The Emporium PIes website will make you want to try all of them, UX made easy by this charming horizontal scrolling site, The site greets you with Kulturista typeface, True Fish Tales was built using a combination of CSS3 and JavaScript, This year, Station Four has undergone a redesign to better its brand, 6 brilliant apps for learning a new skill. Without further ado, here 10 beautiful examples of animations you can create (or replicate) using CSS3. Happy makeover! We couldn't agree more. From bespoke agency sites to online shops, you'll find tons of web design inspiration in these great examples of CSS. Your email address will not be published. Orange Overstated by Chad Pierce. SureFire by Jon Perez. And boy, is he telling the truth. They are awesome, even those in funny cat videos. Bright Mix by Jon Perez. The one-page website of Libor Zezulka is a clean and clever personal portfolio set among gradients that pop and text that begs to be read, thanks to the smart usage of CSS text-shadows. The project thumbnails have a large hover area that take advantage of the opacity property by clearly distinguishing the hover state. That’s what typography is all about. They took time carefully planning their SCSS structure for this application. 1. CSS allows complete and total control over the style of a hypertext document. #0. The site promoting the product is full of CSS3 awesomeness. I really cannot thank you enough for sharing. in English. Founded by Brian Dwyer, Pizza Brain is the world's first Pizza Museum and restaurant. Examples of CSS don't get much better than this! "Only three per cent of the visitors to our site use Internet Explorer. Get code examples like "beautiful css scrollbar" instantly right from your google search results with the Grepper Chrome Extension. The buttons with icon design have been executed well by the developer. England and Wales company registration number 2008885. "As our user base continues to adopt A-grade browsers, we are able to take advantage of the enjoyable parts of CSS3 with acceptable degradation in IE7 and 8.". Users are drawn in by hints of scrolling animation and parallax functions, while the main focus stays on the portfolio. "Right from the start a decision was made to push this piece as far as we could," advises Simon Corry, information architect at Hyperakt. The wooden blocks were made from Leonardi's rendering of 3D models. Life in Greenville takes a look at living and working in Greenville, South Carolina. "All of us at CoWork love Greenville and wanted to create a website that would help people understand why," says lead developer Sean Gaffney. © He goes on to explain that it was both enjoyable and challenging to find a balance between the two. While CSS content cards provide a high level of organization to your layout, they also offer an opportunity for some extra creativity. These fancy table css examples can sure rock your site! Gradient border in pure CSS. Meet the winners of the ImagineFX Artist of the Year competition, Disney has made a real Star Wars lightsaber (and the internet can't cope), Apple April event date CONFIRMED (and you won't believe who leaked it), Coca-Cola unveils a bold and minimal new redesign, Google's new 3D tool is fun, creative and surprisingly useful, Extraordinary Mexican airport logo throws out the rulebook, eGPUs: 3 top external GPUs for 3D artists, A disruptive workflow of 3D custom people for architects, Disney characters' homes as Tiny Houses are surprisingly fascinating. The 'Expertise' page has an interesting navigation design: it uses large circle imagery as links. "[We had] the freedom to play with the design and technology," he explains. Solo is an all-in-one project management tool geared towards use by freelancers. If you scroll down and check out the timeline section, you will notice that the CSS-driven layout intelligently specifies basic rules to create a module that changes from a horizontal to vertical layout on smaller screens. The infographic was put together by Brian Maier and Mark Shelton of Kentucky agency DBS>Interactive as part of an ongoing effort to add fresh content to United Marine website. Scrolling through the site, arrows that tie the different sections together animate top and left positions, keeping the experience cohesive. Read a related article → First things first. Let us know about it in the comments below! Now let’s take a look at some cool examples and the corresponding contact form design CSS so you can recreate them on your site. CSS Tables Previous Next The look of an HTML table can be greatly improved with CSS… The slightly animated logo on hover provides some joy as well. .cf:after { content: " "; display: table; } The group at Cornett IMS wanted a site for A&W that was more than a logo, burgers and root beer. Resizing the site or viewing it on a mobile phone allows you to see the layout adapt for different screen sizes and resolutions. ", Designer Robby Leonardi's home features colourful illustrations and cartoon styles, bringing a cheerful personality to the work. These take advantage of border-radius properties to achieve the look, and apply animations on them as well. Using a simple contact form is a great choice if you want to avoid any complications your visitors may have while filling in your form. "Our love for A&W had to do a lot with memories shared in the restaurants in our hometowns so we wanted to transcend the uniqueness of each store, connecting a new generation of fans with their local A&W," explains chief creative officer David Coomer on the site's purpose. Stripped Diagonal Button Single Border. Fonts Pacifico Regular and Bebas Neue are paired with a warm, pizza-like colour palette creating a friendly aesthetic that's easy to read while still exciting and fun. Beautiful CSS Panels Examples with Source Code. Newfangled COO Chris Butler says. BucketListly is a community that sets out to help users unlock achievements in real life while inspiring others to do the same. In this article, I will show you 90 beautiful button examples along with HTML/CSS recipes. "This meant that, while we were providing backwards compatibility for older browsers where possible, the emphasis was on testing the limits of CSS3 properties. Fantastic CSS3 Website Designs for Inspiration. For example, Burger King, KFC, McDonald’s – they all have the color red in common. US-based Viget Labs has created an awareness-focused web experience to enlist support for the Wildlife Conservation Society's mission to protect African elephants. Squarespace vs Wix: Which is best for a novice? We have handpicked examples on bootstrap panel in html and css along with full demo and code for you. “Our goal was to showcase three projects that represent our expertise, instead of showing all the work we've done so far,” says technical director Torsten Bergler. He explains, "I combined all of those renderings into a single image, and change the CSS left property whenever the user scrolls the page. 3 table styles can be applied to the table by changing the class to table1, table2 or table3. For those learning the rules for the first time, or for experienced designers needing a refresher, this cheatsheet is both educational and a delight to explore. a:visited { color: #93291b; text-decoration: none; }, h1 { font-family: 'Enriqueta', arial, serif; line-height: 1.25; margin: 0 0 10px; font-size: 40px; font-weight: bold; } There was a problem. Adam Clark, the mind behind it, stepped away from a traditional blog layout when designing it to create something with a bit more impact. These days it's unusual to see a publication's website not designed so heavily around imagery, so it's refreshing the first time you navigate to Tech Review's clean, seemingly Swiss-inspired design. "That orange, it's beautiful and it really sets the stage for the content," says the developer, Arjun Mehta. In today’s article, I’m going to cover some really cool typography effects you can use in your projects – or just play around with them! They can easily look skewed, too flat or distorted if you don't use a fitting perspective or go overboard on the angles. CSS 3D transforms create depth and visually interesting elements on your page using perspective. Form Style 1. "Since we have a lot of animated flare going on, it took some time to make it feel natural and supportive to the design," says developer Brandon Lavigne. .cf:after { clear: both }, blockquote { padding: 30px 40px; font-family: 'Bitter',serif; font-size: 18px; border-left: 5px solid #d0d0d0; margin: 20px 40px; color: #a9a9a9; }, .post { width: 800px; margin: 100px auto; background: #ffffff; -webkit-box-shadow: 0px 0px 25px 10px #a9a9a9; box-shadow: 0px 0px 25px 10px #a9a9a9; border-radius: 3px; }, .date { background: #f20553; width: 70px; height: 55px; border-radius: 35px; float: left; margin: 10px 30px 0px 0px; padding: 15px 0px 0px 0px; color: #ffffff; font-size: 24px; font-weight: 900; text-align: center; line-height: 100%; font-family: 'Open sans', sans-serif; }, .date span { font-size: 14px; text-transform: uppercase; font-weight: 400; display: block; color: #ffffff; }, .post-content { padding: 0px 40px 40px 40px; line-height: 24px; }, .post-meta { background: #f7f7f7; padding: 30px 40px 40px 40px; clear: both; border-top: 1px solid #d0d0d0; }, .meta-field { font-family: 'Open sans', sans-serif; width: 200px; float: left; margin-right: 20px; text-transform: uppercase; color: #111111; font-weight: 700; font-size: 12px; }, .meta-field span { font-size: 10px; font-weight: 400; display: block; color: #777777; text-transform: uppercase; }, h1 { color: #d54d7b; font-family: "Great Vibes", cursive; font-size: 165px; line-height: 160px; font-weight: normal; margin-bottom: 0px; margin-top: 40px; text-align: center; text-shadow: 0 1px 1px #fff; }, p { color: #7a7c7f; font-size: 29px; font-family: "Libre Baskerville", serif; line-height: 45px; text-align: center; text-shadow: 0 1px 1px #fff; padding-top: 20px; }, p.byline { font-style: italic; color: #B6B6B6; font-size: 24px; margin-top: 20px; text-align: center; text-shadow: 0 1px 1px #fff; }, h1 { color: #b48608; font-family: 'Droid serif', serif; font-size: 36px; font-weight: 400; font-style: italic; line-height: 44px; margin: 0 0 12px; text-align: center; }, p { color: #eee; font-family: 'Droid Sans', sans-serif; font-size: 15px; font-weight: 400; line-height: 24px; margin: 0 0 14px; }, a { color: #b48608; text-decoration: none; border-bottom: 1px solid #4c3a07; }, a:hover { color: #fff; background: #b48608; }, .date { border-top: 1px solid #fff; position: relative; top: 20px; margin-bottom: 30px; }, .date span { color: #000; text-decoration: none; font-style: italic; font-size: 13px; text-align: center; padding: 2px 5px; background: #fff; width: 120px; margin: 0 auto; display: block; position: relative; top: -10px; font-family: "Droid serif", serif; }, a.btn { font-family: 'Droid serif', serif; background: #b48608; padding: 4px 7px; color: #000; text-decoration: none; margin: 0 auto; width: 100%; width: 120px; margin: 0 auto; display: block; text-align: center; font-style: italic; }, a.btn:hover { color: #000; background: #fff; }, .left { float: left; margin: 0 5% 30px 0; width: 30%; }, .right { float: right; margin: 0 0 30px 0; width: 30%; }, h1 { color: #CEF0D4; font-family: 'Rouge Script', cursive; font-size: 130px; font-weight: normal; line-height: 48px; margin: 0 0 50px; text-align: center; text-shadow: 1px 1px 2px #082b34; }, h2 { color: #a7e8f8; font-family: 'Julius Sans One', sans-serif; font-size: 22px; font-weight: bold; line-height: 32px; margin: 0 0 24px; text-shadow: 1px 1px 1px #082b34; }, p { color: #FFFFFF; font-family: 'Carme', sans-serif; font-size: 16px; line-height: 24px; margin: 0 0 24px; }, a { color: #CEF0D4; text-decoration: underline; }, a:hover { color: #a7e8f8; text-decoration: underline; }, h1 { color: #333333; font-family: 'Bitter', serif; font-size: 50px; font-weight: normal; line-height: 54px; margin: 0 0 54px; }, p { color: #333333; font-family: Georgia, serif; font-size: 18px; line-height: 28px; margin: 0 0 28px; }, p:first-of-type { font-size: 26px; line-height: 36px; margin: 0 0 28px; }, a { color: #c73036; font-family: Georgia, serif; text-decoration: underline; }, a:hover { color: #333333; text-decoration: underline; }, .author { color: #8d8d8d; font-family: Georgia, serif; font-style: italic; font-size: 14px; margin-bottom: 28px; }, .author a { color: #c73036; font-family: "Helvetica Neue", sans-serif; font-weight: bold; text-decoration: none; text-transform: uppercase; }, h1 { color: #fff; font-family: 'Righteous', cursive; font-size: 65px; font-weight: normal; line-height: 60px; margin: 10px 0 20px; text-transform: uppercase; text-shadow: 2px 2px 0 #000, margin: 10px 0 24px; text-align: center; }, h2 { font-size: 30px; letter-spacing: -1px; color: #DFBF84; text-transform: uppercase; text-shadow: 1px 1px 0 #000, margin: 10px 0 24px; text-align: center; line-height: 50px; }, p { color: #f6f6f6; font-family: 'Orienta', sans-serif; font-size: 16px; line-height: 24px; margin: 0 0 24px; text-align: center; }, a { color: #e8d4a7; text-decoration: none; text-align: right; padding: 15px; font-size: 20px; }, a:hover { color: #da9650; text-decoration: blink; }, h1 { color: #d04764; font-family: 'Lobster', cursive; font-size: 36px; font-weight: normal; line-height: 48px; margin: 0 0 18px; text-shadow: 1px 0 0 #fff; }, h2 { color: #2CA4B0; font-family: 'Oleo Script', cursive; font-size: 24px; font-weight: normal; line-height: 32px; margin: 0 0 18px; text-shadow: 1px 0 0 #fff; }, p { color: #333; font-family: 'Original Surfer', cursive; font-size: 16px; line-height: 28px; margin: 0 0 24px; }, a { color: #d04764; font-family: 'Original Surfer', cursive; }, h1 { color: #111; font-family: 'Open Sans Condensed', sans-serif; font-size: 64px; font-weight: 700; line-height: 64px; margin: 0 0 0; padding: 20px 30px; text-align: center; text-transform: uppercase; }, h2 { color: #111; font-family: 'Open Sans Condensed', sans-serif; font-size: 48px; font-weight: 700; line-height: 48px; margin: 0 0 24px; padding: 0 30px; text-align: center; text-transform: uppercase; }, p { color: #111; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 28px; margin: 0 0 48px; }, a { color: #990000; text-decoration: none; }, .date { color: #111; display: block; font-family: 'Open Sans', sans-serif; font-size: 16px; position: relative; text-align: center; z-index: 1; }, .date:before { border-top: 1px solid #111; content: ""; position: absolute; top: 12px; left: 0; width: 100%; z-index: -1; }, .author { color: #111; display: block; font-family: 'Open Sans', sans-serif; font-size: 16px; padding-bottom: 38px; position: relative; text-align: center; z-index: 1; }, .author:before { border-top: 1px solid #111; content: ""; position: absolute; top: 12px; left: 0; width: 100%; z-index: -1; }, .date span, Caméra Thermique Infrarouge Location, Port De L'arsenal Horaires, F1 Classement 2021, Youtube Album Calogero, Motogp 2021 Dates, " />

beautiful css examples

par | Avr 17, 2021 | Non classé | 0 commentaires

If you need any help incorporating the CSS code in your site, let us know in the comments section below. The V02 modern CSS buttons pack has beautiful color schemes and contemporary looks that present-day audiences will love. Let's take a look at 25 of the best and newest CSS/CSS3 Animation examples for your inspiration: 1. Beautiful CSS 3D Transform Examples. Early Night by Rafal Tomal. Pure CSS Zigzag Border. The team emphasise the importance of designers having a good grasp on typography. . Aimed primarily at visitors looking to send wedding invitations and holiday cards, or for those simply wanting an online address book, Postable provides an easy way to capture mailing addresses. The new system is now automated to ensure that the label's assets are all centrally managed and available. Background images are layered to create neat horizontal parallax effects in the header area. The site was created by Crush + Lovely; Jeff Schram and Michael Phillips from its frontend team wanted the CSS to be as beautiful as the design. This is the clean CSS contact form layout. Why... 2. Support for the latest CSS3 properties is strong in the latest versions of all the major browsers – even Internet Explorer – and the possibilities for typography, animation and interactivity have never been greater. They combine the simplicity of checkboxes for the user with the expressiveness of emojis. However this doesn’t tell … CSS & HTML, 5 October 2020, < 1. I used the “overflow:auto” trick to clear the float, set up a dark background and tossed a border on the images. CSS transitions make it smoother to navigate through pages and content. A quality CSS registration form templates make it easier for the developers to quickly grab it and create beautiful looking forms.. The attention to detail shines through for each page. "The web truly feels like one of the ultimate combinations of form and functionality," observes Meis. Registration forms are important for many purposes. border-radius. "In the end every problem turned out to be an opportunity to create a solution that I hadn't originally thought of.". CSS line behind title text Update of April 2019 collection. Azzarelli says he enjoyed developing the site based on user analytics. As Leonardi puts it, "It is always a good thing to make people smile, and I think this website will do just that.". In that way, they’re much more flexible than what you see at first glance. Thanks for the informative article. The "About Us" page features a lively parallax effect that was adjusted for tablets and smartphones. CSS opacity is used to allow enough contrast to place white text on top. Your email address will not be published. Seven examples of alternatives to the Javascript effect using CSS3. Creating fresh websites and community solutions, Amazee Labs at bring your brand to the online world based on the modern open source framework Drupal. Animations are done with CSS transitions. When you purchase through links on our site, we may earn an affiliate commission. That allowed the design decisions to be purposefully considered for small-screens instead of acting as a watered down proxy of the desktop experience. Designers and coders alike have contributed to the beauty of the web; we can always push it further. All of them have minimal hover or active effects. Rating: ★★★★★ The flying bird in this CSS animation example is very natural and vivid, making the entire website engaging and vibrant. "In a multi-developer environment, it's critical the code be organised, easily traversable and thoroughly commented," explains Phillips. 20 Examples of Beautiful CSS Typography Design Bold by Rafal Tomal. "Its support really makes the responsive design come to life," he says. See the Pen EwDar by Alan Collins (@AlanCollins) on CodePen.dark Looking closely, you'll see that they're created with CSS borders and transforms. "We really wanted to capture the spirit and soul of Tech Review with the site's design system, and create a canvas for their art directors to use creatively, " says Swartz. These reviews were originally published in net magazine, the world's best-selling magazine for web designers and developers. The only way this can be illustrated in a way that gets people excited is by demonstrating what it can truly be, once the reins are placed in the hands of those able to create beauty from structure. .active-row which will be the "active" row - this class is used to highlight a specific row and will get it's own CSS as we'll see soon; Styling the table Let's target the main

element first: I use them on the Polypane website and whenever I see them in the wild they look fun and clever. "We wanted to offer the visitor the same experience as when he was a kid discovering a new toy.". You will receive a verification email shortly. A variety of rounded corners and opacity effects round out this clean look. "Our mission is nothing short of using technology to make the world a healthier place!" Decorative images and dramatic yellow accents throughout provide an alluring aesthetic. It's pretty surprising that a simple CSS trick can produce such a good effect!". "We spent many hours working on tiny details," co-founder and engineer Larry Gadea adds. Demo and Source code Link. Bunch-o-Buttons. a, a:visited { font-family: Enriqueta; font-size: 16px; color: #92864d; text-decoration: none; }, p { color: #605833; font-family: Enriqueta; font-size: 16px; padding: 10px 0; }, .post-info { border-top: 1px dashed #70673b; border-bottom: 1px dashed #70673b; font-size: 13px; margin: 15px 0 15px; padding: 3px; text-transform: uppercase; color: #bfb585; }, a.read-more { background-color: #605833; border-radius: 5px 5px 5px 5px; color: white; float: right; font-family: Enriqueta,Arial,sans-serif; text-transform: uppercase; font-size: 16px; padding: 3px 10px; }, a.read-more:hover { background-color: #92864d; border-radius: 5px 5px 5px 5px; text-decoration: none; }, blockquote p { color: #ffffff; font-family: 'Merriweather', serif; font-size: 30px; font-weight: 300; line-height: 40px; margin: 0 30px 40px; text-align: center; text-shadow: #2a8d7b -1px -1px; }, p.author { color: #217969; font-family: 'Helvetica Neue', sans-serif; font-size: 12px; font-weight: bold; line-height: 12px; letter-spacing: 3px; text-align: center; text-shadow: #53b4a2 1px 1px; text-transform: uppercase; }, p.author span { color: #217969; font-family: 'Helvetica Neue', sans-serif; font-style: italic; font-weight: normal; letter-spacing: normal; text-transform: none; }, All these examples were taken from Typespiration – a “show-and-tell” portal for CSS typography enthusiasts. London-based digital agency Traffic was briefed with developing a website that would appeal to a youth audience. #1. Thankful Registry enables couples to create a unique, personalised wedding registry from any gifts they desire from anywhere on the internet. The hard work shows in the site's aesthetic with strong typography and large, powerful images. It's one of the great examples of CSS being used to create amazing visuals. The content is focused, the information is clear, and the animations are silky-smooth. All in all, we wanted a completely custom feel throughout the site that mirrored who we are as a company and what our product does at its core. Creative Bloq is supported by its audience. Caaaaaaaat. I find that very interesting from a design perspective," says Iveson. Did we miss out your favourite example of CSS in action? Creating fresh websites and community solutions, Amazee Labs at bring your brand to the online world based on the modern open source framework Drupal. It's amazing what can be done with CSS these days. Create Beautiful tables with CSS3 . Web designer and illustrator Nolowene Nowak has created a fun online portfolio – a great example of CSS being used to brilliant effect. Gradient with Wrapper. I've always been a fan of video games and with the current level of browser support for CSS3 I was able to enjoy that level of animation and engineering through the CSS. CSS image opacity explained. Creative Bloq is part of Future plc, an international media group and leading digital publisher. The large header and well-designed episode list conveys that there's a personal touch to this design. 4. Well as you saw in the example above that how background color can … #2. 25 Cool CSS Animation Examples for Your Inspiration. It has no background and comes with bold labels, light blue button and soft box-shadow on focus for input fields. The team was looking for a reason to experiment with SVG and CSS animation, and this was the perfect opportunity. 90 CSS3 Button examples with cool Hover effects. With bands like Arcade Fire, Superchunk and The Mountain Goats on the roster, Merge Records in Durham, North Carolina, looked to local digital partner Newfangled to build a world-class ecommerce experience to match the quality of its artists. This card UI is both simple and beautiful. Lead designer and frontend developer Martin Pospisil of Madeo enjoyed working on the site. From envelope-inspired striped borders, to fun background textures, to the robustly rounded Omnes Pro font, the site instantly makes gathering addresses less of a drag. For the website that promotes the app, the "primary goal was to allow our customers to visualise how their own visitors can experience Envoy at their offices," explains co-founder and designer Vítor Lourenço. That’s because the color read triggers the brain cells that relate to food. Dependencies: font-awesome.css Consequently the new homepage uses a large, featured work banner to show off Station Four's most recent work. Legacy by Steve Stead. CSS is also great for adding motion to your sites – take a look at our guide to CSS animation examples and how to recreate them for some pointers. During development, Dumont used Zurb's Foundation: a responsive CSS framework built with Sass. The close button is offset a bit from the box, providing an easy-to-use interface. We had to figure out those logistics." Already creating sites for television networks, digital agencies, charities and businesses, it's clear that their site has impressed almost everyone. Please refresh the page and try again. "We're super-fans of Tech Review, so when Erik Pelletier [VP of product] approached us to work on the site, we were psyched," says Mike Swartz, partner at Upstatement. I mean, what’s there to hate about cats? Text in a border. With numerous different database calls on each page, the order of priority of the data was important to get right. Despite the primary goal of driving sign-ups for a petition, the Viget team has done an artful job of balancing the immediacy that the omnipresent call-to-action presents against the more emotionally compelling, story-driven content. Feature comparison tables can aid in decision-making and add meaning to an otherwise too technical product specification sheet. It plays on the idea that fishermen are famous for telling tall stories by bringing together some amazing 'true tales' of the monsters that lurk beneath the sea. Clark started with 'more crazy' CSS3 transitions and fades, but removed them, he tells us. Form Follows Function (FFF) is a beautifully designed showcase of HTML5 and CSS experiments by Korean developer Jongmin Kim who works as an interactive developer at Firstborn Multimedia in New York. Design studio Caava has a beautiful new site. You get dropdown buttons and group buttons along with the regular button design, which makes this pack really unique. h1 a:visited { font-family: Georgia, arial, serif; font-size: 38px; } The team didn't want to obscure these on any viewport and risk losing their significance. Contributors: Chris Cashdollar and Rich Clark. Check out the hover effects on the Pies page. CSS rotation transforms are used on header text, giving the site a fun print-menu feel. “What's unique is the work's presentation: visualising the project process, guiding visitors through it and telling a story about the work we've done,” says art direction lead Stefan Schuster. Instead of starting with the desktop, the site was built mobile-first. "I'm excited about how the site might grow, and get further refined and built out as this amazing venture becomes realised over time," says Mehta. As a result, you get a simple and engaging call-to-action button. The MIT Technology Review, a 117-year-old publication that covers technology in a way anyone can understand, was relaunched earlier this summer by Boston design studio Upstatement. .cf:before, If you use these examples in other sites, please ensure that you credit the designer. You’ll notice that many of the examples shown here take advantage of hover and click states in order to both share more detailed information and show off some incredible special effects. h1 { color: #111; font-family: 'Helvetica Neue', sans-serif; font-size: 275px; font-weight: bold; letter-spacing: -1px; line-height: 1; text-align: center; }, h2 { color: #111; font-family: 'Open Sans', sans-serif; font-size: 30px; font-weight: 300; line-height: 32px; margin: 0 0 72px; text-align: center; }, p { color: #685206; font-family: 'Helvetica Neue', sans-serif; font-size: 14px; line-height: 24px; margin: 0 0 24px; text-align: justify; text-justify: inter-word; }, h1 { color: #7c795d; font-family: 'Trocchi', serif; font-size: 45px; font-weight: normal; line-height: 48px; margin: 0; }, h2 { color: #7c795d; font-family: 'Source Sans Pro', sans-serif; font-size: 28px; font-weight: 400; line-height: 32px; margin: 0 0 24px; }, .subheader { font-size: 26px; font-weight: 300; color: #ffcc66; margin: 0 0 24px; }, p { color: #4c4a37; font-family: 'Source Sans Pro', sans-serif; font-size: 18px; line-height: 32px; margin: 0 0 24px; }, a { color: #ff9900; background: #fff4a3; text-decoration: none; }, h1 { color: #ffffff; font-family: 'Raleway',sans-serif; font-size: 62px; font-weight: 800; line-height: 72px; margin: 0 0 24px; text-align: center; text-transform: uppercase; }, h2 { color: #ffffff; font-family: 'Raleway',sans-serif; font-size: 30px; font-weight: 800; line-height: 36px; margin: 0 0 24px; text-align: center; }, p { color: #f8f8f8; font-family: 'Raleway',sans-serif; font-size: 18px; font-weight: 500; line-height: 32px; margin: 0 0 24px; }, a { color: #c8c8c8; text-decoration: underline; }, a:hover { color: #1c1c1c; text-decoration: underline; }, a, After doing some research, they found that most existing online information about typographic terminology used simple, static images. This is one of the best resources I have found in quite some time. Get code examples like "css beautiful gradients" instantly right from your google search results with the Grepper Chrome Extension. Fonts like Clarendon and Bryant provide a nice balance of sophistication and fun. When you’re reading stuff related to food, you’re going to find a lot of red color use. "We desired a site that was fluid, instant, and fun," remembers designer/developer Nick Keebaugh, "and that's exactly how our booth is. Each card has its own background photo – presumably to use a client’s photo or logo. Rounded corners, ribbons and clever hover states keep the site engagement entertaining. Responsive: yes. The site greets you with Kulturista typeface at an attention-grabbing 53px font size on top of a full-width, responsive hero image. How do I get a custom colored underline that will span multiple lines? Front and centre is the haunting art direction that compels you to stop and confront the emotional mission. Portfolio pieces are framed within wooden windows that have animated hovers. "We wrote a media query for these devices that changes the background-attachment from fixed to scroll and sets the individual background-positions so that the images sit in the right place," explained the Traffic team. Fully responsive as well, the site looks great on smaller layouts. Here we list 28 great examples of CSS sites that will provide a burst of web design inspiration. The below is the list of some beautiful CSS Typography examples which can vouch for the real beauty seen over these options. He reveals, "This involved masking the select boxes on the forms with an outer div, adding transparency, and the use of -webkit-appearance. To make the demo slightly interesting, I added a hover effect that slowly applies a glow. "Skeleton provides a really nice base set of widths to design for, so it just came down to tweaking a few items in the layout for each screen size," says Gaffney. It greatly affects the mood of the reader. However, it…, Portfolios are not a new trend in the industry. Beautiful CSS 3D Transform Examples CSS 3D transforms create depth and visually interesting elements on your page using perspective. 58. Collection of free HTML and CSS custom select box code examples: dropdown, multiple, custom arrow, etc. The beautiful, edge-to-edge photography and magazine-like layout made the effort to build it responsively a challenge. Learn more. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari. CSS transitions are used to help aid in the demonstration, enhancing the experience without ever getting in the way of the content. All rights reserved. "Postable has an incredibly playful look to it, especially for a web application, and I wanted to stay true to those designs," says frontend developer, Kevin Kneife. Because our target market don't seem to use it, there seemed little reason for Solo to support it.". True Fish Tales really hooks you in. You can follow him on Twitter. © 2013 WDExplorer All Rights Reserved. Paired with Miller Text for body copy, the typography feels classic yet contemporary. When he's not online, he's spending quality time with his friends and family. The Gently Mad is a topic-agnostic podcast about web creators. Visit our corporate site. As you scroll through the one-page site, the states update in the demo. Please deactivate your ad blocker in order to see our subscription offer, Type Terms was partly created as an excuse to experiment with CSS animation, Tech Review uses CSS to create a clean, Swiss feel, Bucketlistly enables travellers and adventurers share their stories and encourage others to have their own adventures, 96 Elephants is named after the number of elephants killed every day in Africa, CSS transitions are used to help aid in the Envoy demonstration, The style is minimal and uses the golden ratio as well as interesting typography, The large header and well-designed episode list conveys a personal touch to this design, With competence and confidence, this website is a beautiful example of CSS, CSS rotation transforms are used on header text, giving the A&W site a fun print-menu feel, Nolowene Nowak showcases her skills with this fun online portfolio, The website draws users in with hints of scrolling animation and parallax functions, Fitbit's site design is bright and lively, featuring icons and colourful statistics graphics, The team behind MammothReach created this cool photobooth MammothBooth, Lab Partners showcase their work with a colourful and decorative website, Pizza Brain is fully responsive and looks great on smaller layouts, Postable provides an easy way to capture mailing addresses, The website features colourful illustrations and cartoon styles, Libor Zezulka is a clean and clever personal portfolio, The Emporium PIes website will make you want to try all of them, UX made easy by this charming horizontal scrolling site, The site greets you with Kulturista typeface, True Fish Tales was built using a combination of CSS3 and JavaScript, This year, Station Four has undergone a redesign to better its brand, 6 brilliant apps for learning a new skill. Without further ado, here 10 beautiful examples of animations you can create (or replicate) using CSS3. Happy makeover! We couldn't agree more. From bespoke agency sites to online shops, you'll find tons of web design inspiration in these great examples of CSS. Your email address will not be published. Orange Overstated by Chad Pierce. SureFire by Jon Perez. And boy, is he telling the truth. They are awesome, even those in funny cat videos. Bright Mix by Jon Perez. The one-page website of Libor Zezulka is a clean and clever personal portfolio set among gradients that pop and text that begs to be read, thanks to the smart usage of CSS text-shadows. The project thumbnails have a large hover area that take advantage of the opacity property by clearly distinguishing the hover state. That’s what typography is all about. They took time carefully planning their SCSS structure for this application. 1. CSS allows complete and total control over the style of a hypertext document. #0. The site promoting the product is full of CSS3 awesomeness. I really cannot thank you enough for sharing. in English. Founded by Brian Dwyer, Pizza Brain is the world's first Pizza Museum and restaurant. Examples of CSS don't get much better than this! "Only three per cent of the visitors to our site use Internet Explorer. Get code examples like "beautiful css scrollbar" instantly right from your google search results with the Grepper Chrome Extension. The buttons with icon design have been executed well by the developer. England and Wales company registration number 2008885. "As our user base continues to adopt A-grade browsers, we are able to take advantage of the enjoyable parts of CSS3 with acceptable degradation in IE7 and 8.". Users are drawn in by hints of scrolling animation and parallax functions, while the main focus stays on the portfolio. "Right from the start a decision was made to push this piece as far as we could," advises Simon Corry, information architect at Hyperakt. The wooden blocks were made from Leonardi's rendering of 3D models. Life in Greenville takes a look at living and working in Greenville, South Carolina. "All of us at CoWork love Greenville and wanted to create a website that would help people understand why," says lead developer Sean Gaffney. © He goes on to explain that it was both enjoyable and challenging to find a balance between the two. While CSS content cards provide a high level of organization to your layout, they also offer an opportunity for some extra creativity. These fancy table css examples can sure rock your site! Gradient border in pure CSS. Meet the winners of the ImagineFX Artist of the Year competition, Disney has made a real Star Wars lightsaber (and the internet can't cope), Apple April event date CONFIRMED (and you won't believe who leaked it), Coca-Cola unveils a bold and minimal new redesign, Google's new 3D tool is fun, creative and surprisingly useful, Extraordinary Mexican airport logo throws out the rulebook, eGPUs: 3 top external GPUs for 3D artists, A disruptive workflow of 3D custom people for architects, Disney characters' homes as Tiny Houses are surprisingly fascinating. The 'Expertise' page has an interesting navigation design: it uses large circle imagery as links. "[We had] the freedom to play with the design and technology," he explains. Solo is an all-in-one project management tool geared towards use by freelancers. If you scroll down and check out the timeline section, you will notice that the CSS-driven layout intelligently specifies basic rules to create a module that changes from a horizontal to vertical layout on smaller screens. The infographic was put together by Brian Maier and Mark Shelton of Kentucky agency DBS>Interactive as part of an ongoing effort to add fresh content to United Marine website. Scrolling through the site, arrows that tie the different sections together animate top and left positions, keeping the experience cohesive. Read a related article → First things first. Let us know about it in the comments below! Now let’s take a look at some cool examples and the corresponding contact form design CSS so you can recreate them on your site. CSS Tables Previous Next The look of an HTML table can be greatly improved with CSS… The slightly animated logo on hover provides some joy as well. .cf:after { content: " "; display: table; } The group at Cornett IMS wanted a site for A&W that was more than a logo, burgers and root beer. Resizing the site or viewing it on a mobile phone allows you to see the layout adapt for different screen sizes and resolutions. ", Designer Robby Leonardi's home features colourful illustrations and cartoon styles, bringing a cheerful personality to the work. These take advantage of border-radius properties to achieve the look, and apply animations on them as well. Using a simple contact form is a great choice if you want to avoid any complications your visitors may have while filling in your form. "Our love for A&W had to do a lot with memories shared in the restaurants in our hometowns so we wanted to transcend the uniqueness of each store, connecting a new generation of fans with their local A&W," explains chief creative officer David Coomer on the site's purpose. Stripped Diagonal Button Single Border. Fonts Pacifico Regular and Bebas Neue are paired with a warm, pizza-like colour palette creating a friendly aesthetic that's easy to read while still exciting and fun. Beautiful CSS Panels Examples with Source Code. Newfangled COO Chris Butler says. BucketListly is a community that sets out to help users unlock achievements in real life while inspiring others to do the same. In this article, I will show you 90 beautiful button examples along with HTML/CSS recipes. "This meant that, while we were providing backwards compatibility for older browsers where possible, the emphasis was on testing the limits of CSS3 properties. Fantastic CSS3 Website Designs for Inspiration. For example, Burger King, KFC, McDonald’s – they all have the color red in common. US-based Viget Labs has created an awareness-focused web experience to enlist support for the Wildlife Conservation Society's mission to protect African elephants. Squarespace vs Wix: Which is best for a novice? We have handpicked examples on bootstrap panel in html and css along with full demo and code for you. “Our goal was to showcase three projects that represent our expertise, instead of showing all the work we've done so far,” says technical director Torsten Bergler. He explains, "I combined all of those renderings into a single image, and change the CSS left property whenever the user scrolls the page. 3 table styles can be applied to the table by changing the class to table1, table2 or table3. For those learning the rules for the first time, or for experienced designers needing a refresher, this cheatsheet is both educational and a delight to explore. a:visited { color: #93291b; text-decoration: none; }, h1 { font-family: 'Enriqueta', arial, serif; line-height: 1.25; margin: 0 0 10px; font-size: 40px; font-weight: bold; } There was a problem. Adam Clark, the mind behind it, stepped away from a traditional blog layout when designing it to create something with a bit more impact. These days it's unusual to see a publication's website not designed so heavily around imagery, so it's refreshing the first time you navigate to Tech Review's clean, seemingly Swiss-inspired design. "That orange, it's beautiful and it really sets the stage for the content," says the developer, Arjun Mehta. In today’s article, I’m going to cover some really cool typography effects you can use in your projects – or just play around with them! They can easily look skewed, too flat or distorted if you don't use a fitting perspective or go overboard on the angles. CSS 3D transforms create depth and visually interesting elements on your page using perspective. Form Style 1. "Since we have a lot of animated flare going on, it took some time to make it feel natural and supportive to the design," says developer Brandon Lavigne. .cf:after { clear: both }, blockquote { padding: 30px 40px; font-family: 'Bitter',serif; font-size: 18px; border-left: 5px solid #d0d0d0; margin: 20px 40px; color: #a9a9a9; }, .post { width: 800px; margin: 100px auto; background: #ffffff; -webkit-box-shadow: 0px 0px 25px 10px #a9a9a9; box-shadow: 0px 0px 25px 10px #a9a9a9; border-radius: 3px; }, .date { background: #f20553; width: 70px; height: 55px; border-radius: 35px; float: left; margin: 10px 30px 0px 0px; padding: 15px 0px 0px 0px; color: #ffffff; font-size: 24px; font-weight: 900; text-align: center; line-height: 100%; font-family: 'Open sans', sans-serif; }, .date span { font-size: 14px; text-transform: uppercase; font-weight: 400; display: block; color: #ffffff; }, .post-content { padding: 0px 40px 40px 40px; line-height: 24px; }, .post-meta { background: #f7f7f7; padding: 30px 40px 40px 40px; clear: both; border-top: 1px solid #d0d0d0; }, .meta-field { font-family: 'Open sans', sans-serif; width: 200px; float: left; margin-right: 20px; text-transform: uppercase; color: #111111; font-weight: 700; font-size: 12px; }, .meta-field span { font-size: 10px; font-weight: 400; display: block; color: #777777; text-transform: uppercase; }, h1 { color: #d54d7b; font-family: "Great Vibes", cursive; font-size: 165px; line-height: 160px; font-weight: normal; margin-bottom: 0px; margin-top: 40px; text-align: center; text-shadow: 0 1px 1px #fff; }, p { color: #7a7c7f; font-size: 29px; font-family: "Libre Baskerville", serif; line-height: 45px; text-align: center; text-shadow: 0 1px 1px #fff; padding-top: 20px; }, p.byline { font-style: italic; color: #B6B6B6; font-size: 24px; margin-top: 20px; text-align: center; text-shadow: 0 1px 1px #fff; }, h1 { color: #b48608; font-family: 'Droid serif', serif; font-size: 36px; font-weight: 400; font-style: italic; line-height: 44px; margin: 0 0 12px; text-align: center; }, p { color: #eee; font-family: 'Droid Sans', sans-serif; font-size: 15px; font-weight: 400; line-height: 24px; margin: 0 0 14px; }, a { color: #b48608; text-decoration: none; border-bottom: 1px solid #4c3a07; }, a:hover { color: #fff; background: #b48608; }, .date { border-top: 1px solid #fff; position: relative; top: 20px; margin-bottom: 30px; }, .date span { color: #000; text-decoration: none; font-style: italic; font-size: 13px; text-align: center; padding: 2px 5px; background: #fff; width: 120px; margin: 0 auto; display: block; position: relative; top: -10px; font-family: "Droid serif", serif; }, a.btn { font-family: 'Droid serif', serif; background: #b48608; padding: 4px 7px; color: #000; text-decoration: none; margin: 0 auto; width: 100%; width: 120px; margin: 0 auto; display: block; text-align: center; font-style: italic; }, a.btn:hover { color: #000; background: #fff; }, .left { float: left; margin: 0 5% 30px 0; width: 30%; }, .right { float: right; margin: 0 0 30px 0; width: 30%; }, h1 { color: #CEF0D4; font-family: 'Rouge Script', cursive; font-size: 130px; font-weight: normal; line-height: 48px; margin: 0 0 50px; text-align: center; text-shadow: 1px 1px 2px #082b34; }, h2 { color: #a7e8f8; font-family: 'Julius Sans One', sans-serif; font-size: 22px; font-weight: bold; line-height: 32px; margin: 0 0 24px; text-shadow: 1px 1px 1px #082b34; }, p { color: #FFFFFF; font-family: 'Carme', sans-serif; font-size: 16px; line-height: 24px; margin: 0 0 24px; }, a { color: #CEF0D4; text-decoration: underline; }, a:hover { color: #a7e8f8; text-decoration: underline; }, h1 { color: #333333; font-family: 'Bitter', serif; font-size: 50px; font-weight: normal; line-height: 54px; margin: 0 0 54px; }, p { color: #333333; font-family: Georgia, serif; font-size: 18px; line-height: 28px; margin: 0 0 28px; }, p:first-of-type { font-size: 26px; line-height: 36px; margin: 0 0 28px; }, a { color: #c73036; font-family: Georgia, serif; text-decoration: underline; }, a:hover { color: #333333; text-decoration: underline; }, .author { color: #8d8d8d; font-family: Georgia, serif; font-style: italic; font-size: 14px; margin-bottom: 28px; }, .author a { color: #c73036; font-family: "Helvetica Neue", sans-serif; font-weight: bold; text-decoration: none; text-transform: uppercase; }, h1 { color: #fff; font-family: 'Righteous', cursive; font-size: 65px; font-weight: normal; line-height: 60px; margin: 10px 0 20px; text-transform: uppercase; text-shadow: 2px 2px 0 #000, margin: 10px 0 24px; text-align: center; }, h2 { font-size: 30px; letter-spacing: -1px; color: #DFBF84; text-transform: uppercase; text-shadow: 1px 1px 0 #000, margin: 10px 0 24px; text-align: center; line-height: 50px; }, p { color: #f6f6f6; font-family: 'Orienta', sans-serif; font-size: 16px; line-height: 24px; margin: 0 0 24px; text-align: center; }, a { color: #e8d4a7; text-decoration: none; text-align: right; padding: 15px; font-size: 20px; }, a:hover { color: #da9650; text-decoration: blink; }, h1 { color: #d04764; font-family: 'Lobster', cursive; font-size: 36px; font-weight: normal; line-height: 48px; margin: 0 0 18px; text-shadow: 1px 0 0 #fff; }, h2 { color: #2CA4B0; font-family: 'Oleo Script', cursive; font-size: 24px; font-weight: normal; line-height: 32px; margin: 0 0 18px; text-shadow: 1px 0 0 #fff; }, p { color: #333; font-family: 'Original Surfer', cursive; font-size: 16px; line-height: 28px; margin: 0 0 24px; }, a { color: #d04764; font-family: 'Original Surfer', cursive; }, h1 { color: #111; font-family: 'Open Sans Condensed', sans-serif; font-size: 64px; font-weight: 700; line-height: 64px; margin: 0 0 0; padding: 20px 30px; text-align: center; text-transform: uppercase; }, h2 { color: #111; font-family: 'Open Sans Condensed', sans-serif; font-size: 48px; font-weight: 700; line-height: 48px; margin: 0 0 24px; padding: 0 30px; text-align: center; text-transform: uppercase; }, p { color: #111; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 28px; margin: 0 0 48px; }, a { color: #990000; text-decoration: none; }, .date { color: #111; display: block; font-family: 'Open Sans', sans-serif; font-size: 16px; position: relative; text-align: center; z-index: 1; }, .date:before { border-top: 1px solid #111; content: ""; position: absolute; top: 12px; left: 0; width: 100%; z-index: -1; }, .author { color: #111; display: block; font-family: 'Open Sans', sans-serif; font-size: 16px; padding-bottom: 38px; position: relative; text-align: center; z-index: 1; }, .author:before { border-top: 1px solid #111; content: ""; position: absolute; top: 12px; left: 0; width: 100%; z-index: -1; }, .date span,

Caméra Thermique Infrarouge Location, Port De L'arsenal Horaires, F1 Classement 2021, Youtube Album Calogero, Motogp 2021 Dates,

Poster le commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Code Anti-spam

*