menu
Anh-Thi DINH

CSS notes

Posted on 01/12/2018, in Web development.

CSS combinatiors

For more information, click here.

div p : select all <p> elements inside a <div> element.

div > p : select all <p> elements that are immediate children of a <div> element.

div + p : select all <p> elements that are placed immediately after <div> element.

div ~ p : select all <p> elements that are siblings (cùng bậc/anh chị em) of <div> element.

Auto rotate text by CSS

Cf. If you wanna class .card to be rotated,

.card{
	background: #00f;
	width: 100px;
	height: 100px;
	animation: rotate 2s infinite;
	-webkit-animation: rotate 2s infinite;
}

@-o-keyframes rotate {
  50% {
    transform: rotate(-14deg);
  }
}
@-moz-keyframes rotate {
  50% {
    transform: rotate(-14deg);
  }
}
@-ms-keyframes rotate {
  50% {
    transform: rotate(-14deg);
  }
}
@-webkit-keyframes rotate {
  50% {
    transform: rotate(-14deg);
  }
}
@keyframes rotate {
  50% {
    transform: rotate(-14deg);
  }
}

Chia cột tự động

Nếu trang đủ rộng (căn cứ vào 350px) thì nó sẽ chia thành 2 cột, còn nếu hẹp quá thì nó sẽ chuyển về 1 cột. Tham khảo ở đây.

.newspaper {
    -webkit-columns: 350px 2; /* Chrome, Safari, Opera */
    -moz-columns: 350px 2; /* Firefox */
    columns: 350px 2;
}

Chia cột phần reading list

Tham khảo trang dinhanhthi.com.

<div id="reading-idx">
  {% for post in site.tags.reading limit:5 %}
      <div class="booki">
          <div class="bookcover">
              {% if post.full %}
              <a href="{{ post.url | prepend: site.baseurl }}">
                  <img class="img-book-cover" src="{{ post.bookimg }}">
              </a>
              {% else %}
                  <img class="img-book-cover" src="{{ post.bookimg }}">
              {% endif %}
          </div>
          <div class="booktitle">
              {% if post.full %}
                  <a href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
              {% else %}
                  {{ post.title }}
              {% endif %}
          </div>
          <div class="bookauthor">{{ post.bookauthor }}</div>
      </div>
  {% endfor %}
</div>

Phần CSS, lưu ý ở đây chia @media theo size của iPhone4/5.

<style type="text/css">
	#reading-idx{
		-webkit-columns: 100px 5; /* Chrome, Safari, Opera */
	    -moz-columns: 100px 5; /* Firefox */
	    columns: 100px 5;
	    text-align: center;
	    padding: 5px;
	}
    .booki{
		margin-top: 10px;
		padding: 5px;
	}
	.bookauthor{
		font-size: 90%;
		opacity: 0.6;
	}
	.booktitle{
		font-weight: 600;
		margin-top: 10px;
	}
	@media (min-width: 322px) and (max-width: 500px) {
		#reading-idx .booki:last-child{
			display: none;
		}

		#reading-idx{
			-webkit-columns: 150px 4; /* Chrome, Safari, Opera */
		    -moz-columns: 150px 4; /* Firefox */
		    columns: 150px 4;
		    text-align: center;
		    padding: 5px;
		}
	}	
	@media (max-width: 321px) {
		#reading-idx .booki:last-child{
			display: none;
		}

		#reading-idx{
			-webkit-columns: 100px 4; /* Chrome, Safari, Opera */
		    -moz-columns: 100px 4; /* Firefox */
		    columns: 100px 4;
		    text-align: center;
		}
	}
</style>
css
Top