InfoHeap
Tech tutorials, tips, tools and more
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

CSS properties

  • CSS3 flexbox
  • all
  • animation
  • background-color
  • background-image
  • border
  • border-color
  • border-radius
  • border-style
  • border-width
  • bottom
  • box-shadow
  • box-sizing
  • calc function
  • clip
  • color
  • color value currentColor
  • color values
  • cursor
  • float
  • font
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight
  • generated content
  • left
  • letter-spacing
  • line-height
  • list-style
  • list-style-image
  • list-style-position
  • list-style-type
  • margin
  • max-height
  • max-width
  • min-height
  • min-width
  • opacity
  • outline
  • outline-color
  • outline-style
  • outline-width
  • overflow
  • padding
  • pointer-events
  • position
  • resize
  • right
  • text-align
  • text-decoration
  • text-indent
  • text-overflow
  • text-shadow
  • text-transform
  • top
  • transform
  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function
  • visibility
  • white-space
  • word-break
  • word-spacing
  • word-wrap/overflow-wrap
  • z-index
 
  • Home
  • > Tutorials
  • > CSS
  • > CSS properties

CSS clip

on Apr 18, 2016

CSS property clip (clipped region) defines what portion of an element’s border box is visible. The clip property applies only to absolutely positioned (position=absolute, fixed) elements.

CSS property clip

CSS version: CSS 2.1
Value: rect(top, right, bottom, left) | auto | inherit
Initial: auto
Applies to: absolutely positioned elements
Inherited: no

Example – css clip

Original image size (150×100).

In the following code, CSS property clip can be changed to the following values
  • rect(10px, auto, auto, 10px)
  • rect(auto, auto, auto, auto)
  • rect(10px, 100px, 80px, 10px)
<style type="text/css">
img.clip {
  position: absolute;
  /* top, right, bottom, left */
  clip: rect(10px, auto, auto, 10px);
}
</style>

<img class="clip" src="/img/elephant1.jpg">
clip refresh done
try it online

Related

  • CSS overflow - visible, hidden and scroll for overflowing content
  • CSS white-space - collaping and wrapping of whitespaces and newlines
  • CSS text-overflow - truncate text with three dots
  • HTML pre tag tutorial

Specification

  • W3C CSS 2.1 clip specification

Suggested posts:

  1. css z-index – ordering of overlapping elements
  2. Css position property – static, relative, absolute and fixed positioning
  3. CSS top
  4. CSS generated content for ::after and ::before
  5. CSS left
  6. CSS text-align – align text left, right or justify
  7. CSS list-style-image – use image as marker in list
  8. CSS text-overflow – truncate text with three dots
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in Tutorials | Tagged CSS, CSS properties, Tutorials

Follow InfoHeap

facebook
twitter
googleplus
  • Browse site
  • Article Topics
  • Article archives
  • Recent Articles
  • Contact Us
  • Omoney
Popular Topics: Android Development | AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Kubernetes | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries

Copyright © 2023 InfoHeap.

Powered by WordPress