Posts

Showing posts with the label css

How to use radial gradient in css

 CSS radial gradient Radial gradients define the centre and the color transition outward from the center. The minimum color for making radial gradients is two. What is the syntax of radial gradient? The syntax of radial gradient is : radial-gradient(first color name,second color name,so on); What is an example of radial gradient? Example: Can we give a percentage in the radial gradient?  yes we can give a percentage of the color ingredient and the syntax of giving percentage user color is that: radial-gradient(first color name 80%,second color name20%,so on); Example: Can we remove the default shape of the radial gradient?  yes we can change the default shape of the radial gradient, the default is shape is elliptical Writing following syntax for changing the default shape. . radial-gradient(circle at center , color name ,second color name); .Example: We can also change the position of the circle writing position alo

How to use css margin

Image
  What is CSS margin? The gap between any elements of the web pages is known as margin.  there is 3 type of margins left margin right margin-top margin and bottom margin. why we use a margin on web pages?  All the website on the internet design by the CSS and any gap between any elements or defining the position of the element on the webpage we use Margin in the CSS. sometimes we use texts or images on the web pages that look beautiful at a certain position and the distance between the other elements. In the maximum time gap between the elements outer gaps. we are just with the help of margin as compared to position or padding in CSS. How we remove the default margin on the web page? we can remove the default margin by applying the following CSS code. *{ margin :0; } What are different ways of giving margin in CSS?  There are different ways of giving margin in CSS. Manually write:   P{ magin-left:30px; magin-right:30px; magin-bottom:30px; magin-top:30px; } Shortcut of giving margin va

How to apply gradient in css

   In this article, we will learn about the CSS linear-gradient, how gradient work, how to apply the linear gradient in the background image, how to change the flow of the gradient. The colour gradient Producing colour Transitions with vary continuously colour position. Linear gradient:  By default, the linear gradient is top to bottom flow. You can change the flow of gradient from bottom to top, right to left, left to right, right diagonal and left diagonal with simple changes in the CSS code. Example: .grad{ background-image:linear-gradient(green,yellow); } This is the example of the linear gradient Left to right flow of the gradient: The flow of gradient is also changed by writing the simple code. .grad{ background-image:linear-gradient(to left,green,yellow); } This is the example of the linear gradient   Right to left flow of the gradient: The flow of gradient is also changed by writing the simple code. .grad

CSS or CSS3 flexbox

Flexbox  In this article,we will discuss the flexbox in the CSS language. What is the flexbox? The flexbox is the layout module for the web pages using rows and column concepts.The items are set according to rows or columns of the flexbox. Why flexbox use in CSS? Basically, flexbox is made for designing the layout of a page very easily.The biggest problem is positioning the items on the page,but by using flexbox position the items become very easy . Following are the reasons of using flexbox layout: Positioning the items. Alignment of items. Dividing the page into different boxes. Get rid of float and positioning properties. Help in the responsive pages.   Before, we take an example: let's discuss the concept of flexbox. This divides the whole page into x-axis or y-axis and makes boxes according to the designer, also arrange items on the x-axis or y-axis. Example: flexbox 1 2 3

CSS border width

  CSS border width The css border width property gives the width to the four borders of the box .The width may be thin,thick,medium,or value(px,em,in,cm,pt,etc) Syntax: border-width:<border-top-width> <border-right-width> <border-bottom-width> <border-left-width> border-width:thin; border-width:thick; border-width:medium; Example of css border width: <style type="text/css"> p.thin{ border-style: dashed; border-width: thin; } p.thick{ border-style: dotted; border-width: thick; } p.px{ border-style: solid; border-width: 10px; } p.medium{ border-style: double; border-width: medium; } p.mix{ border-style: ridge; border-color: yellow; border-width: thick medium thin 10px; } </style> Output: This A thin border. This A thick border. This A medium border. This A 10px border. This A Mix border.

CSS borders

  CSS borders The CSS allows to style borders by using CSS border properties like color, style, width, etc of properties. CSS border style:   The border-style styles the border by using a different kind of borders . Following are the list of the borders kind,we can use in the css dotted =: give dotted border to the border dashed =: give dashed border to the border solid =: give Solid border to the border double =:give double border to the border groove =: give 3D groove border to the border. The effect depends on the border-color value ridge =: give 3D ridge border to the border. The effect depends on the border-color value inset =: give 3D inset border to the border. The effect depends on the border-color value outset =: give 3D outset border to the border. The effect depends on the border-color value none =:give no border to the border hidden =:give hidden border to the border Example of css border style: <style type="text/css"> p.dashed{ border-style:

CSS Pseudo classes

  Pseudo classes In this article ,we will learn about the common pseudo classes which are used in the CSS language during designing the web development. :first-child() :last-child() :nth-child() :nth-last-child :nth-last-type-child :nth-of-type :only-child :only-of-type :last-of-type :first-of-type :empty :not() First-child() In the following example,selectors match all the first child of div section div.box1 p:first child{ color:blue; } <div class=”box1”> <p>programgrab1</p> <p>programgrab2</p> <div class=”box2”> <p>programgrab1</p> <p>programgrab2</p> </div></div> last-child() In the following example,selectors match all the last child<p> of div section div.box1 p:last child{ color:blue; } <div class=”box1”> <p>programgrab1</p> <p>programgrab2</p> <div class=”box2”> <p>programgrab1</p> <p>programgrab2</p> </div></div> nth-child() In the

Hire a programmer