This page will focus on the simple BORDER-RADIUS feature.
This page will focus on border-radius..
|
Let's start by showing a standard sequence.
It's using the basic features found on IQGO.
Generally; the border-radius is a modest 5px.
Each area can be altered.
The outer-container, the inner-page, and each individual box.
Plus, the boxes have 2 layers which can be altered to any choice.
Example 2
We'll increase the inner border-radius to 12px.
Example 3
Essentially; there are four Rows in our sequence.
Each of the 4 box-areas has an white inner box, and an grayer outer area.
Example 4
We'll keep it simple.
All 4 outer boxes will be border-radius:13px
and all 4 inner boxes will be border-radius:58px.
Example 5
Let's keep it simple.
All 4 outer boxes will be border-radius:13px
and, all 4 inner boxes will be border-radius:18px.
Example 6
After experimenting with several border-radius options...
It's very evident that our original choice for IQgo is the best choice.
So, We're keeping the original border-radius.
Important note:
Example 7
In theory, borders can be widened.
and, colors could be changed as well.
Plus, each individual box can be altered. #1,#2, and #3.
(Although the effects are usually too extravagant).
Even the entire outer-field can be reshaped.
Large inner border
border: solid rgba(5 , 2 , 2 , 1.0) 5.2px;
|
large outer border:
border: solid rgba(105 , 102 , 102 , 1.0) 6px;
|
We're widening the inner-border.
We'll also make it greener.
and make it dotted, instead of solid.
border: dotted rgba(115 , 253 , 3 , 1.0) 3px;
|
Example 8
Here,
We'll alter the inner-field of the container.
solely by changing the border-radius. and keeping all other features unchanged.
Notice the increased curvature on all four corners.
I'm also choosing red text.
color: red;
|
Here's a grayish-black text.
color: #423d4c;
|
In this row,
we'll use blue text.
color: blue;
|
Example 9
As you'll probably learned;
our original set-up was adequate.
Our initial choices of border-radius worked just fine !!!
Example 10
When using linear-gradient,
we're keeping these changes very minimal.
Example 11
We always prefer minor changes.
But, colorful options are always available.
Example 12
When using the linear-gradient effect;
We've chosen to NEVER use this feature within the field.
But; we'll use Linear-gradient in the foreground below (for demonstrative purposes only).
No comments:
Post a Comment