filmov
tv
Inset Border Trick for Anything in Squarespace // Squarespace Outline Tutorial
Показать описание
---
Border vs outline - if they aren't that different, why do we need both? So we can combine them to create an inset border for literally ANYTHING on a Squarespace site! That’s exactly what you‘ll learn in this tutorial.
---
---
Border and outline codes are super similar in CSS. They have a weight, style, and color that you can use to help any block of content on your site stand out. But did you know they can be combined?! 😮
This week’s tutorial will show you how to create an “inset” style border by using both border and outline properties for specific blocks of content on your Squarespace site.
Below is the main code from this tutorial and the selectors that I used. Be sure to adjust the color and weight of the border and to pick the right block ID and/or selector for what you want to isolate.
#block-123456 {
background:#eee;
border: 1px solid #000;
outline: 15px solid #eee
}
Image set to a collage layout design: .design-layout-collage .image-card
Code Block: .code-block
Markdown Block: .markdown-block
List Section Cards: .list-item[data-is-card-enabled="true"]
- - -
🔗 RELATED VIDEOS 🔗
- - -
💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸
Use my affiliate link and code PARTNER10 - You'll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎
- - -
---
---
---
The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥
Border vs outline - if they aren't that different, why do we need both? So we can combine them to create an inset border for literally ANYTHING on a Squarespace site! That’s exactly what you‘ll learn in this tutorial.
---
---
Border and outline codes are super similar in CSS. They have a weight, style, and color that you can use to help any block of content on your site stand out. But did you know they can be combined?! 😮
This week’s tutorial will show you how to create an “inset” style border by using both border and outline properties for specific blocks of content on your Squarespace site.
Below is the main code from this tutorial and the selectors that I used. Be sure to adjust the color and weight of the border and to pick the right block ID and/or selector for what you want to isolate.
#block-123456 {
background:#eee;
border: 1px solid #000;
outline: 15px solid #eee
}
Image set to a collage layout design: .design-layout-collage .image-card
Code Block: .code-block
Markdown Block: .markdown-block
List Section Cards: .list-item[data-is-card-enabled="true"]
- - -
🔗 RELATED VIDEOS 🔗
- - -
💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸
Use my affiliate link and code PARTNER10 - You'll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎
- - -
---
---
---
The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥
Комментарии