Categories
Website Design

Custom gradient border (inspired by Apple) — Micro lesson #23 [Video]

Custom gradient border (inspired by Apple) — Micro lesson #23

While browsing Apple.com‘s site, you might be like Grímur and want to style elements in your site using beautiful, rainbow gradients. Combining the power of gradients and padding, you can style your elements’ borders to have fully customizable gradient borders in the Webflow Designer.

In this lesson, we’re going to duplicate Apple’s button and the structure for this is as follows: a Text block with padding on all four sides inside a Link block.

To create the linear gradient border, you’ll need to do three things:
1. Add a linear gradient to the Link block
2. Set the Text block’s background color to white (the same as your site’s background color)
3. Add padding to the Link block on all four sides (hold down Shift to do this at once!)

And as a bonus step, with the Link block selected, you can adjust your typography settings to remove the default blue color and the underline to give it a more modern look.

Clone the button here: https://webflow.com/website/apple-gradient-border

Explore more about background and spacing in our 101 Crash Course on Webflow University: https://university.webflow.com/courses/webflow-101-crash-course

———-
Get started with Webflow: https://wfl.io/2r7cVUW
Join the Webflow Community: https://webflow.com/community

https://webflow.com
https://twitter.com/webflow
https://facebook.com/webflow

Watch/Read More
Categories
Website Design

How to Make Google Home Page using HTML CSS. How To Design Google Search Page From Scratch Google UI [Video]

How to Make Google Home Page using HTML CSS. How To Design Google Search Page From Scratch Google UIPlease Subscribe Our Channel:https://www.youtube.com/channel/UCcde..."Decimal To Binary" Converter JavaScript Project:https://youtu.be/gRh5jFZfiC0JavaScript "digital clock" design:https://youtu.be/5lu3xGZBsGw"Copy To Clipboard" Simple JavaScript Project:https://youtu.be/6eRChMvWSggJavaScript Booklist App:https://youtu.be/s3dU9omql9wJavaScript calculator project:https://youtu.be/wZoiaPZ3vaoResturant website design:https://youtu.be/UWHScDoWZDYBusiness Agency website design: https://youtu.be/UW0392LiG14JavaScript Memory Game:https://youtu.be/NQVoL94ChoQWhack a mole game in JavaScript:https://youtu.be/-kXmNkYokcMMusic Provided by: NoCopyrightSoundNoCopyrightSound Website: https://ncs.io/************************Video Keyword*******************html,css,javascript,html5,css3,web-design,web programming,google,google,google homepage,how to make google,codingtuts,coding tuts,programming,website,googles homepage,time-lapse,timelapse,time lapse,html website,php,jquery,ruby on rails,mysql,html & css website,html5 website,html5 & css3 website,responsive website,professional website,professional responsive website,search enginehow to create a google home page,how to make google home page ui,how to make google home page design,how to make google,google home page,html and css tutorial,similar to google,using css flex box,recreating the google homepage,google ui,google design,with source codehow to design google search page website using html & css step by step,how to make website design using html and css step by step tutorial,website design,web design,html and css website design,how to make website,how to create website,website design usign html and css,how to make website using html and css,website design tutorial,ui design usign html and css,html and css,html tutorial,css tutorial,html css website design,wesbite design 2020,website designingHow to Make Google Home Page using HTML CSS. How To Design Google Search Page From Scratch Google UIHow to Make Google Home Page using HTML CSS. How To Design Google Search Page From Scratch Google UIWith GitHub Source CodeHow to Make Google Home Page using HTML CSS. How To Design Google Search Page From Scratch Google UIHow to Make Google Home Page using HTML CSS. How To Design Google Search Page From Scratch Google UI

Categories
Website Design

How the Chameleon Web Development Framework is used to modernize the IBM i, RPG community.This channel helps IBM i developers to become more proficient in creating browser apps, by presenting step by step instructional videos on how best to use an IBM i Web Development Framework.We are all about replacing the traditional display files (DSPF) with HTML pages. The Chameleon Framework is a freeware and is available under the standard MIT license, and was built on IBM i for IBM i developers. It provides a comprehensive development environment where RPGLe professionals will be able to create browser apps in matter of minutes.If you are interested in browser development on IBM I using RPGLe or CPPLe, click on that subscribe button and leave your suggestions in the comments.* FREE * - Framework to Create Browser Apps on IBM iChameleon Web Development Framework for IBM ihttp://www.hexache.com/ABOUTTwo Guys, Mike Augel and Joseph Park with top level credentials and decades of IBM i experiences. Mike has global expertise in providing business solutions and Joseph brings forth an in-depth development expertise from the lowest bowels of the IBM i to various modern languages on multiple platforms.

Categories
Website Design

In this session, two Webflow Product Managers (PMs) will give a behind the scenes look at what it’s like to launch Memberships, a highly-anticipated feature at Webflow. Trust us when we say this is one that content creators and marketers in particular won’t want to miss.Alex Diaz (he/him), senior product marketing manager, Webflow Alex Diaz is a Senior Product Marketing Manager leading Webflow’s mission to expand the core capabilities of what users do today within the platform — shaping the go-to-market efforts and product positioning, value props, and overall competitive messaging.Ibifuro Odu, she/her, product manager, Webflow IB leads the personalization team at webflow, working to empower businesses to create even more unique experiences for their customers. She’s passionate about driving real-world impact.Presented at Webflow's No-Code Conference 2021.#NoCodeConf #NCC----------Get started with Webflow: https://wfl.io/2r7cVUWJoin the Webflow Community: https://webflow.com/communityhttps://webflow.comhttps://twitter.com/webflowhttps://facebook.com/webflow