mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-08-13 17:44:19 +02:00
feat: Update contents
This commit is contained in:
Phuoc Nguyen
272
contents/resizable-element.mdx
Normal file
272
contents/resizable-element.mdx
Normal file
@@ -0,0 +1,272 @@
|
||||
---
|
||||
category: Feedback
|
||||
created: '2019-12-10'
|
||||
description: Create resizable indicators with CSS
|
||||
keywords: css resizable, css resize cursor
|
||||
thumbnail: /assets/css-layout/thumbnails/resizable-element.png
|
||||
title: Resizable element
|
||||
---
|
||||
|
||||
## HTML
|
||||
|
||||
```html
|
||||
<div class="resizable-element">
|
||||
<!-- The content -->
|
||||
...
|
||||
|
||||
<!-- The top left square -->
|
||||
<div class="resizable-element__resizer resizable-element__resizer--tl"></div>
|
||||
|
||||
<!-- The top square -->
|
||||
<div class="resizable-element__resizer resizable-element__resizer--tc"></div>
|
||||
|
||||
<!-- The top right square -->
|
||||
<div class="resizable-element__resizer resizable-element__resizer--tr"></div>
|
||||
|
||||
<!-- The right square -->
|
||||
<div class="resizable-element__resizer resizable-element__resizer--rc"></div>
|
||||
|
||||
<!-- The right bottom square -->
|
||||
<div class="resizable-element__resizer resizable-element__resizer--rb"></div>
|
||||
|
||||
<!-- The bottom square -->
|
||||
<div class="resizable-element__resizer resizable-element__resizer--bc"></div>
|
||||
|
||||
<!-- The bottom left square -->
|
||||
<div class="resizable-element__resizer resizable-element__resizer--bl"></div>
|
||||
|
||||
<!-- The left square -->
|
||||
<div class="resizable-element__resizer resizable-element__resizer--lc"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## CSS
|
||||
|
||||
```css
|
||||
.resizable-element {
|
||||
/* Border */
|
||||
border: 1px dashed #d1d5db;
|
||||
|
||||
/* Used to position the squares */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.resizable-element__resizer {
|
||||
/* Border */
|
||||
border: 1px solid #d1d5db;
|
||||
position: absolute;
|
||||
|
||||
/* Size */
|
||||
height: 0.75rem;
|
||||
width: 0.75rem;
|
||||
}
|
||||
|
||||
.resizable-element__resizer--tl {
|
||||
/* Resize cursor */
|
||||
cursor: nwse-resize;
|
||||
|
||||
/* Positioned at the top left corner */
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.resizable-element__resizer--tc {
|
||||
/* Resize cursor */
|
||||
cursor: ns-resize;
|
||||
|
||||
/* Positioned at the middle of top side */
|
||||
left: 50%;
|
||||
top: 0px;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.resizable-element__resizer--tr {
|
||||
/* Resize cursor */
|
||||
cursor: nesw-resize;
|
||||
|
||||
/* Positioned at the top right corner */
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
|
||||
.resizable-element__resizer--rc {
|
||||
/* Resize cursor */
|
||||
cursor: ew-resize;
|
||||
|
||||
/* Positioned at the middle of right side */
|
||||
right: 0px;
|
||||
top: 50%;
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
|
||||
.resizable-element__resizer--rb {
|
||||
/* Resize cursor */
|
||||
cursor: nwse-resize;
|
||||
|
||||
/* Positioned at the right bottom corner */
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
transform: translate(50%, 50%);
|
||||
}
|
||||
|
||||
.resizable-element__resizer--bc {
|
||||
/* Resize cursor */
|
||||
cursor: ns-resize;
|
||||
|
||||
/* Positioned at the middle of bottom side */
|
||||
bottom: 0px;
|
||||
right: 50%;
|
||||
transform: translate(50%, 50%);
|
||||
}
|
||||
|
||||
.resizable-element__resizer--bl {
|
||||
/* Resize cursor */
|
||||
cursor: nesw-resize;
|
||||
|
||||
/* Positioned at the bottom left corner */
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
transform: translate(-50%, 50%);
|
||||
}
|
||||
|
||||
.resizable-element__resizer--lc {
|
||||
/* Resize cursor */
|
||||
cursor: ew-resize;
|
||||
|
||||
/* Positioned at the middle of left side */
|
||||
left: 0px;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
```
|
||||
|
||||
You can move the mouse over each squares located at the corners and the middle of sides to see the cursors which indicate the associated side can be resized.
|
||||
|
||||
<Playground>
|
||||
```css styles.css hidden
|
||||
body {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
height: 24rem;
|
||||
}
|
||||
|
||||
.resizable-element {
|
||||
/* Border */
|
||||
border: 1px dashed #d1d5db;
|
||||
|
||||
/* Used to position the squares */
|
||||
position: relative;
|
||||
|
||||
/* Demo */
|
||||
height: 16rem;
|
||||
width: 16rem;
|
||||
}
|
||||
|
||||
.resizable-element__resizer {
|
||||
/* Border */
|
||||
border: 1px solid #d1d5db;
|
||||
position: absolute;
|
||||
|
||||
/* Size */
|
||||
height: 0.75rem;
|
||||
width: 0.75rem;
|
||||
}
|
||||
|
||||
.resizable-element__resizer--tl {
|
||||
/* Resize cursor */
|
||||
cursor: nwse-resize;
|
||||
|
||||
/* Positioned at the top left corner */
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.resizable-element__resizer--tc {
|
||||
/* Resize cursor */
|
||||
cursor: ns-resize;
|
||||
|
||||
/* Positioned at the middle of top side */
|
||||
left: 50%;
|
||||
top: 0px;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.resizable-element__resizer--tr {
|
||||
/* Resize cursor */
|
||||
cursor: nesw-resize;
|
||||
|
||||
/* Positioned at the top right corner */
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
|
||||
.resizable-element__resizer--rc {
|
||||
/* Resize cursor */
|
||||
cursor: ew-resize;
|
||||
|
||||
/* Positioned at the middle of right side */
|
||||
right: 0px;
|
||||
top: 50%;
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
|
||||
.resizable-element__resizer--rb {
|
||||
/* Resize cursor */
|
||||
cursor: nwse-resize;
|
||||
|
||||
/* Positioned at the right bottom corner */
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
transform: translate(50%, 50%);
|
||||
}
|
||||
|
||||
.resizable-element__resizer--bc {
|
||||
/* Resize cursor */
|
||||
cursor: ns-resize;
|
||||
|
||||
/* Positioned at the middle of bottom side */
|
||||
bottom: 0px;
|
||||
right: 50%;
|
||||
transform: translate(50%, 50%);
|
||||
}
|
||||
|
||||
.resizable-element__resizer--bl {
|
||||
/* Resize cursor */
|
||||
cursor: nesw-resize;
|
||||
|
||||
/* Positioned at the bottom left corner */
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
transform: translate(-50%, 50%);
|
||||
}
|
||||
|
||||
.resizable-element__resizer--lc {
|
||||
/* Resize cursor */
|
||||
cursor: ew-resize;
|
||||
|
||||
/* Positioned at the middle of left side */
|
||||
left: 0px;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
```
|
||||
|
||||
```html index.html hidden
|
||||
<div class="resizable-element">
|
||||
<div class="resizable-element__resizer resizable-element__resizer--tl"></div>
|
||||
<div class="resizable-element__resizer resizable-element__resizer--tc"></div>
|
||||
<div class="resizable-element__resizer resizable-element__resizer--tr"></div>
|
||||
<div class="resizable-element__resizer resizable-element__resizer--rc"></div>
|
||||
<div class="resizable-element__resizer resizable-element__resizer--rb"></div>
|
||||
<div class="resizable-element__resizer resizable-element__resizer--bc"></div>
|
||||
<div class="resizable-element__resizer resizable-element__resizer--bl"></div>
|
||||
<div class="resizable-element__resizer resizable-element__resizer--lc"></div>
|
||||
</div>
|
||||
```
|
||||
</Playground>
|
||||
Reference in New Issue
Block a user