728x90

Box Shadows

Utilities for controlling the box shadow of an element.
ClassProperties
.shadowbox-shadow: 0 2px 4px 0 rgba(0,0,0,0.10);
.shadow-mdbox-shadow: 0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08);
.shadow-lgbox-shadow: 0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08);
.shadow-innerbox-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.06);
.shadow-nonebox-shadow: none;

Outer shadow

Use the .shadow.shadow-md, or .shadow-lg utilities to apply different sized outer box shadows to an element.

.shadow
.shadow-md
.shadow-lg
<div class="shadow"></div>
<div class="shadow-md"></div>
<div class="shadow-lg"></div>

Inner shadow

Use the .shadow-inner utility to apply a subtle inset box shadow to an element. This can be useful for things like form controls or wells.

.shadow-inner
<div class="shadow-inner"></div>

No shadow

Use .shadow-none to remove an existing box shadow from an element. This is most commonly used to remove a shadow that was applied at a smaller breakpoint.

.shadow-none
<div class="shadow-none"></div>

Responsive

To control the shadow of an element at a specific breakpoint, add a {screen}: prefix to any existing shadow utility. For example, use md:shadow-lg to apply the shadow-lg utility at only medium screen sizes and above.

For more information about Tailwind's responsive design features, check out the Responsive Designdocumentation.

all

sm

md

lg

xl

<div class="shadow sm:shadow-md md:shadow-lg lg:shadow-inner xl:shadow-none ..."> <!-- ... --> </div>

Customizing

By default Tailwind provides three drop shadow utilities, one inner shadow utility, and a utility for removing existing shadows. You can change, add, or remove these by editing the shadows section of your Tailwind config.

If a default shadow is provided, it will be used for the non-suffixed .shadow utility. Any other keys will be used as suffixes, for example the key '2' will create a corresponding .shadow-2 utility.

{
// ...
shadows: {
-   default: '0 2px 4px 0 rgba(0,0,0,0.10)',
-   'md': '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)',
-   'lg': '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)',
-   'inner': 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
+   '1': '0 2px 4px rgba(0,0,0,0.05)',
+   '2': '0 4px 8px rgba(0,0,0,0.1)',
+   '3': '0 8px 16px rgba(0,0,0,0.15)',
    'none': 'none',
}
}

Responsive and State Variants

By default, only responsive variants are generated for shadow utilities.

You can control which variants are generated for the shadow utilities by modifying the shadowsproperty in the modules section of your Tailwind config file.

For example, this config will also generate hover and focus variants:

{
// ...
modules: {
    // ...
-   shadows: ['responsive'],
+   shadows: ['responsive', 'hover', 'focus'],
}
}

Disabling

If you don't plan to use the shadow utilities in your project, you can disable them entirely by setting the shadows property to false in the modules section of your config file:

{
// ...
modules: {
    // ...
-   shadows: ['responsive'],
+   shadows: false,
}
}


'WEB > CSS' 카테고리의 다른 글

How to bring navigation div to the front  (0) 2019.05.01
[CSS] Media Query에서 Screen과 Only Screen의 차이점  (31) 2019.05.01
Box-Shadow  (0) 2018.06.07
[CSS] text-justify  (0) 2018.02.05
HTML5 number inputs – Comma and period as decimal marks  (0) 2018.01.24
728x90

박스 주위에 그림자 적용시에 box-shadow 속성을 사용합니다. 입체적으로 보이는 모양이 보기에도 좋아보입니다.

box-shadow 속성

아래와 같이, box-shadow 속성은 4 개의 숫자와 색상 값을 지정합니다.

.shadow {

  -moz-box-shadow: 3px 3px 3px 3px #999;

  -webkit-box-shadow: 3px 3px 3px 3px #999;

  box-shadow: 3px 3px 3px 3px #999;

  }
첫 번째 값수평 방향의 그림자 오프셋 길이를 나타냅니다. 양수 값을 지정하면 오른쪽에, 음수 값을 지정하면 왼쪽에 그림자가 생깁니다.
두 번째 값수직 그림자 오프셋 길이를 나타냅니다. 양수 값을 지정하면 박스 아래에, 음수 값을 지정하면 박스 위에 그림자가 붙습니다.
세 번째 값그림자의 흐림 반경(blur radius)을 나타냅니다. 음수 값을 지정할 수는 없습니다. 값이 클수록 그림자의 끝이 흐려지고, 값이 "0"이면 그림자 끝이 흐려지지 않고 선명한 그림자가 됩니다.
네 번째 값그림자의 확산 거리(Spread distance)를 나타냅니다. 양수 값을 지정하면 그림자의 전방위로 확대되고, 음수 값을 지정하면 그림자의 크기가 줄어 듭니다. 양수 값을 지정하면 오른쪽에, 음수 값을 지정하면 왼쪽에 그림자가 붙습니다.
다섯 번째 값그림자의 색상 (color)을 지정합니다.

▼ 아래와 같이 3개의 도형에 각각 그림자를 붙여 보았습니다. first 박스에 양수 값을 주어 그림자를 붙였습니다.

second 박스에는 음수 값, third 박스에는 그림자의 확산 정도를 값 -1로 확인해 보았습니다.

그림자 붙이는 방법

.shadowbox {
  width:100px;
  height:100px; }
 
.first{
  border-radius:3px;
  box-shadow:3px 3px 3px 3px #999;}
   
.second{
  border-radius:50%;
  box-shadow:-3px -3px 3px 6px #093;}
 
.third{
  border-radius:3px;
  transform-origin:50% 50%;
  transform:rotate(20deg);
  box-shadow:3px 3px 0px -1px #F00;}

first
second
third

상자의 내부에 그림자 적용하기:inset

그림자의 흐림 정도를 적정하게 사용하면 그라데이션 효과를 낼 수 있습니다.

.inset-box {
  width:100px;
  height: 100px;
  border-radius:50%;
  border:1px solid #999;
  background:#FFF;
  box-shadow:inset 0 2px 45px #7c7c7e;
}

inset

픽셀을 겹쳐 쌓아 그림자 만들기

수평 방향의 값을 "0"으로 해 두고, 수직 방향으로 1 픽셀씩 증가시키먄사, 연한 색에서 점차 짙은 색으로 값을 지정합니다. 결과, 아래와 같이 입체적인 박스가 완성되었습니다.

.shadowbox {
  0 1px 1px #c0c0c0,
  0 2px 0 #a8a7a6,
  0 3px 0 #8b8a89,
  0 4px 0 #7d7b7a,
  0 5px 0 #686766,
  0 6px 3px #5f5e5d;
  }

픽셀을 겹쳐 쌓아 그림자 만들기

박스 외부와 내부의 그림자 맞추기

여러 값을 쉼표(,)로 구분하면서 지정합니다. 결과, 박스의 내부와 외부 모두에 그림자가 붙은 모습이 완성됐습니다.

.inset-shadowbox {
  0 1px 1px #c0c0c0,
  0 2px 0 #a8a7a6,
  0 3px 0 #8b8a89,
  0 4px 0 #7d7b7a,
  0 5px 0 #686766,
  0 6px 3px #5f5e5d,
  inset 1px 1px 50px #7c7c7e;
  }

겹쳐 쌓아 그림자 만들기

New
 
 
0
 
 
0
 
 
0
Blogger
 
0
Google +
 
0
Hatena
 
0
Pocket


'WEB > CSS' 카테고리의 다른 글

[CSS] Media Query에서 Screen과 Only Screen의 차이점  (31) 2019.05.01
Box Shadow II  (0) 2018.06.07
[CSS] text-justify  (0) 2018.02.05
HTML5 number inputs – Comma and period as decimal marks  (0) 2018.01.24
Select box dir  (0) 2018.01.24
728x90

Spacing

Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance.

How it works

Assign responsive-friendly margin or padding values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass map ranging from .25rem to 3rem.

Notation

Spacing utilities that apply to all breakpoints, from xs to xl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0 and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for smmdlg, and xl.

Where property is one of:

  • m - for classes that set margin
  • p - for classes that set padding

Where sides is one of:

  • t - for classes that set margin-top or padding-top
  • b - for classes that set margin-bottom or padding-bottom
  • l - for classes that set margin-left or padding-left
  • r - for classes that set margin-right or padding-right
  • x - for classes that set both *-left and *-right
  • y - for classes that set both *-top and *-bottom
  • blank - for classes that set a margin or padding on all 4 sides of the element

Where size is one of:

  • 0 - for classes that eliminate the margin or padding by setting it to 0
  • 1 - (by default) for classes that set the margin or padding to $spacer * .25
  • 2 - (by default) for classes that set the margin or padding to $spacer * .5
  • 3 - (by default) for classes that set the margin or padding to $spacer
  • 4 - (by default) for classes that set the margin or padding to $spacer * 1.5
  • 5 - (by default) for classes that set the margin or padding to $spacer * 3
  • auto - for classes that set the margin to auto

(You can add more sizes by adding entries to the $spacers Sass map variable.)

Examples

Here are some representative examples of these classes:

.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

Horizontal centering

Additionally, Bootstrap also includes an .mx-auto class for horizontally centering fixed-width block level content—that is, content that has display: block and a width set—by setting the horizontal margins to auto.

Centered element
<div class="mx-auto" style="width: 200px;">
  Centered element
</div>


'WEB > BOOTSTRAP' 카테고리의 다른 글

Font awesome Gallery  (0) 2019.04.27
Bootstrap 4 img-circle class not working  (0) 2018.06.07
728x90

am developing a plugin and in the admin where I provide a field that is filled in by users with a date. I am wondering if there is a native datepicker in the WP Admin I that is available.

I usually include a small jQuery datepicker script that does it, but if one is already available I would prefer that for obvious reasons like lighter code, UI consistency, etc. This seems like something that would/should be included but I've not been able to find such documentation on what jQuery stuff, if any, are available in the Admin.

    Answer has already been given, but I'd like to extend it a bit to include CSS (Wordpress doesn't provide stylesheets for jQuery UI), to help anyone passing trying to use this kind of scripts.

    Basically (and very simply), you need to have at least these three lines of code:

        wp_enqueue_script('jquery-ui-datepicker');
        wp_register_style('jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css');
        wp_enqueue_style('jquery-ui');

    Explanation line by line:

    1. Load jQuery UI Datepicker (library already registered by Wordpress, nothing else is necessary)
    2. Register Stylesheet with handle jquery-ui (I used the one hosted by Google, you can use whichever you prefer)
    3. Effectively include stylesheet into the ones loaded by Wordpress in this page

    And now your Datepickers will all be nice and colourful! :)

    HTML5 gift

    This is not what the OP was asking for, but it's somewhat related to the question: if you don't want to bother adding the Datepicker, you could try the HTML5 date input type, letting the browser create a very nice (and default) datepicker:

    <input type="date" name="the_date" />

    Yes, nothing else is needed (and it works in the back-end of Wordpress, too: https://jsfiddle.net/2jxdvea0/

    More info on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

    Note As @mark pointed out, the input does not work for Firefox (as well as for other browsers). This is noted in the MDN page, but of course it should be mentioned here as well. There are, of course, workarounds to this problem, but it would be beyond the sake of this question to write about them.

    Update 03-11-2017 As of @kosso's comment, Firefox support for this is coming in version 57

      Yes. Wordpress includes this in the core. Here are a couple articles about it:

      WP Codex: Function Reference/wp enqueue script

      Paul Underwood's Iris Color Picker Tutorial (same principles apply to datepicker)

        Add the following line of code to enqueue the jquery ui datepicker library from your plugin:

        wp_enqueue_script('jquery-ui-datepicker');

        You can download the stylesheet file from the jquery ui library site and include it in your plugin. You would then enqueue the CSS file like the following:

        wp_enqueue_style('jquery-ui-css', 'http://www.example.com/your-plugin-path/css/jquery-ui.css');

        Alternatively, You can include the jquery ui CSS from Google (you don’t need to ship the CSS files with your plugin if you go via this route):

        wp_enqueue_style('jquery-ui-css', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css');

        Add the following JQuery code to your javascript file so it attaches the datepicker to any fields with a class of “custom_date”:

        <script type="text/javascript">
        jQuery(document).ready(function($) {
        $('.custom_date').datepicker({
        dateFormat : 'yy-mm-dd'
        });
        });
        </script>

        Now, you can simply add class “custom_date” to the date fields in the HTML code and it will show a date picker calender when a user clicks on that field.

        <input type="text" class="custom_date" name="start_date" value=""/>

        + Recent posts