標籤: css

Drop and drag

Drag and drop so simple it hurts
https://github.com/bevacqua/dragula

angular-drag-and-drop-lists
http://marceljuenemann.github.io/angular-drag-and-drop-lists/

GRIDSTACK.JS
http://troolee.github.io/gridstack.js/[……]

閱讀更多

[CSS] 子容器無法撐開父容器 child overflows parent when parent width is 100 percent, parent div can not follow child width

css child overflows parent when parent width is 100 percent, parent div can not follow child width
CSS 當父容器寬為100% (無特殊設定即為100%)，子容器寬度超出父容器，父容器無法被子容器撐大，而出現漏白現如下圖

解決方法在父容器中加上

display:inline-block
範例檔案下載
download

[……]

閱讀更多

Media Queries設定

@media screen and (max-width: 480px) {
       (智慧型手機專用樣式)
}

@media screen and (min-width: 481px) and (max-width: 768px) {
       (平板電腦專用樣式)
}

@media screen and (min-width: 769px) {
        (電腦專用樣式)
}

區段的順序雖然可以變換，但如果考量CSS的執行效率，則建議從小畫面往大畫面撰寫樣式，這種作法不只寫起來更有效率，也可以提升可讀性。[……]

閱讀更多

CSS override 樣式無法覆蓋樣式的解決方案

CSS樣式無法覆蓋樣式的解決方案

<style>
.aaa h3{
color:#FF0000;
font-size:50px;
}
.bbb h3{
color:#0AFF00

}
</style>
<div class=”aaa”>
    <div class=”bbb”>
        <h3>test</h3>
    </div>
</div>

改用id
<style>
.aaa .bbb h3{
color:#FF0000;
font-size:50px;
}
#ccc h3{
color:#0AFF00
}
</style>
<div class=”aaa”>
    <div class=”bbb” id=”ccc”>
        <h3>test</h3>
    </div>
</div>

延伸閱讀
http://stackoverflow.com/questions/9956467/overriding-styles-without-important[……]

閱讀更多

CSS transition scale image 圖片縮放

今天很其怪用transition scale來改變容器大小沒問題
但對圖片就沒有效，上網找了了解決方法

img{
    /* Webkit for Chrome and Safari */
  -webkit-transform: scale(1, 1); /* This is the scale for the normal size of the image.*/
  -webkit-transition-duration: 500ms;
  -webkit-transition-timing-function: ease-out;

  /* Webkit for Mozila Firefox */
  -moz-transform: scale(1, 1);
  -moz-transition-duration: 500ms;
  -moz-transition-timing-function: ease-out;

  /* Webkit for IE( Version: 11, 10 ) */
  -ms-transform: scale(1, 1);
  -ms-transition-duration: 500ms;
  -ms-transition-timing-function: ease-out;
}

img:hover{
     /* Webkit for Chrome and Safari */
  -webkit-transform: scale(1.2, 1.2); // This is the enlarged size scale of the image.
  -webkit-transition-duration: 500ms;
  -webkit-transition-timing-function: ease-out;

  /* Webkit for Mozila Firefox */
  -moz-transform: scale(1.2, 1.2);
  -moz-transition-duration: 500ms;
  -moz-transition-timing-function: ease-out;

  /* Webkit for IE( Version: 11, 10 ) */
  -ms-transform: scale(1.20, 1.20);
  -ms-transition-duration: 500ms;
  -ms-transition-timing-function: ease-out;
}

延伸閱讀：https://drujoopress.wordpress.com/2014/01/31/zoom-effect-using-css3-transition-scale/[……]

閱讀更多

CSS li float:center 實現li水平居中對齊

2020/03/12 更新
發現更簡單的方法，請參考這篇文章
https://vector.cool/css-ul-li-horizontal-align-center-only-css/
在切網頁版的時候，常常需要用到選單水平居中，雖然用<a>標籤很方便，在父容器下text-align center，就可達成上圖編排，但有時候HTML並不是由設計師自己開的，很多清單功能的在HTML上都會用<ul><li>方式呈現，例如頁碼，這是一個普遍慣用的作法，工程師一目了然。
但前端設計師套CSS時卻會遇到無法居中對齊問題，可以向左對齊，可以向右對齊，就是不能水平居中對齊，所以本篇提供一個解決方法，可以順利向上圖一樣，項目居中對齊。
HTML：
<div class="main-container">
    <div class="fixer-container">
        <ul class="list-of-floating-elements">
            <li class="floated">Floated element</li>
            <li class="floated">Floated element</li>
            <li class="floated">Floated element</li> 
        </ul>
    </div>
</div>

CSS：

<style>
ul li{
	float:left;
	margin:0 20px
}
.main-container {
	float:left;
	position:relative;
	left:50%;
}
.fixer-container {
	float:left;
	position:relative;
	left:-50%;
}
</style>

參考：

[……]

閱讀更多

CSS 垂直水平居中最簡單的解決方案

垂直水平居中 ie9+

.child {
    position: absolute;
    top: 50%;  /* position the top  edge of the element at the middle of the parent */
    left: 50%; /* position the left edge of the element at the middle of the parent */

    transform: translate(-50%, -50%); /* This is a shorthand of
                                         translateX(-50%) and translateY(-50%) */
}

沿伸閱讀

http://stackoverflow.com/questions/8508275/how-to-center-a-position-absolute-element

[……]

閱讀更多